Vue 项目快速入门

Posted 2021-12-10 HUTEROX

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 项目快速入门相关的知识，希望对你有一定的参考价值。

说明

此部分为自行整理

下载Node.js

前面是直接使用 cdn加速器导入vue的，但是现在做开发所以不可能用 cdn 还是要自己下载。

下载直接进入官网下载：http://nodejs.cn/download/

下载安装后会自动配置环境。

版本验证

node -v
npm -v

npm 配置

这个就和 python 的pip是一个玩意。为什么要配置联想 pip 你就懂了。

npm install cnpm -g

配置淘宝的镜像，一般只有在实在下载不了第三方依赖的时候再用

cnpm install xxx

项目构建

安装vue-cli

#在命令台输入 -g 全局 不加当前项目使用
npm install vue-cli -g
#查看是否安装成功
vue list

创建应用

创建一个文件夹作为你的项目所在地，在终端进入所在地。

vue init webpack myvue

记住出了输入项目名字和作者名字以外，其他都选 no （其实你也可以一路yes 只是可以有些版本问题，有问题要自己改一下）

然后一路回车。

初始化并运行

cd myvue
npm install
如果有问题使用 cnpm i 也可以
npm run dev

此时在你的 8081 端口就能用了

在终端按下 Crtl + c 终止

项目结构

首先我选择在 IDEA 里面做这个开发，这个没办法统一一下，我的SSM在这里做那个前端也在这里做一下，而且我的 Go也是这里搞的。（SSM 和 GO 的笔记实在不好整理而且有些东西不方便展示）

我们的目光主要放在 Scr 下的包

Vue 项目的特点（webpack)

这个其实还是我们webpack 的特点在这个构建出来的项目代码里面的特殊的地方。

这个其实主要是 export 和 import 在这里是啥玩意。

首先解释 export 是暴露的意思，其实就是相当于提供一个方法给另一个文件调用。

我们先创建一个Hello.js

//暴露一个方法
exports.sayHi = function () {
  document.write("<h1>Test</h1>>")
}

之后就是调用，你看这个就懂了：

那么说这个我们来说说这个在项目里面的Componments

<template>
<!--模板，也就是对应的 html 文件 结合了 vue 的-->
</template>

<script>
export default {
  //给外面暴露出来
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*css 布局 scoped 告诉它是当前使用当前模板的效果 */
</style>

使用 webpack

前面是创建了一个 webpack 项目那么现在我们需要这玩意来打包我们的页面。

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用

下面我们要来使用，不过这里还要安装一下

npm install webpack -g
npm install webpack-cli -g

webpack -v
webpack-cli -v

在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件

enrty请求main.js的文件

output是输出的位置和名字

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}

之后在终端执行

webpack 打包
或者
webpack --watch  监听变化

使用

创建一个 index.html (回到也可以随便你)

直接导入

例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>

Vue 路由

作为一个前后端分离项目，其实更像是一个在浏览器里面的独立应用，所以所有的页面跳转什么的都需要在用户本地去完成。

那么这里就需要使用到一个 vue-router

npm install vue-router --save-dev

这个其实结合 CS 架构其实就是不同页面的跳转，这个就是更像一个应用，我们服务端只负责数据传输，这个就有别于传统的 MVT / MVC 模式。

路由使用基本架构

想要使用路由的话还是要配置一下的。

在使用时，主要有一下三个文件需要被修改。

main.js router/index.js App.vue

(PS : 由于后面需要使用到路由，在项目创建的时候其实可以选择自动导入路由依赖，这样一来就不需要自己手动配置)

依次序：

之后是 index.js 这个是配置路由的地方

最后是 App.vue

注意每一个模块需要被暴露出来，路由通过暴露出来的名字进行路由配置。

路由嵌套

这个其实就是套娃使用 children:

套娃



export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 配置Hi对象
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      //引子路由
      children:[
        {path:'/',component:Hi},
        {path:'Hi1',component:Hi1},
        {path:'Hi2',component:Hi2},
      ]
    }
  ]
})

此时访问就是**/Hi/Hi1**

      <router-link to="/Hi/Hi1">Hi1</router-link>|
      <router-link to="/Hi/Hi2">Hi2</router-link>

传递参数

方式一


//index.js内
 {
          path:'/news/:id',
          component:newsDetail,
  }
//组件跳转
<router-link to="/news/123">跳转到详情页面</router-link>

此时在被跳转页面通过

$route.params.id

方式二

这个主要是传递参数不一样


 <router-link :to="{name:'news',params:{id:666}}">跳转到详情页面</router-link>

参数获取一样，当然也可以这样获取

先打开支持 props

 {
          path:'/news/:id',
          component:newsDetail,
          props: true
  }

然后在接受的地方这样改

（Ps: 多参数也是一样的)

重定向

路由模式&404处理

hash 带 # 号：http://localhost/#/login
history 不带的： http://localhost/login

之后是那个404处理，那其实也很简单

 {
          path:'*',
          component:NotFound,
          
  }

这个 * 匹配没有找到的玩意

NotFound 是你对应的视图

钩子函数

这个东西其实类似于过滤器

当一个页面被跳转或者访问的时候，会调用两个方法，我们如果需要做

一些用户验证之类的就需要使用这个。

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例