前端装机之vue最佳实践-v2.6（一）

项目如果是有原项目的，可以参考一二，如果无原项目，创建新项目的，可以照着初始化自己的项目。

1.创建vue2.6项目

之前装机又说到装node，安装好node的基础上。下载vue的cli构造基础的架构

npm install @vue-cli -g
or
yarn install @vue-cli -g

这是一个全局的cli工具，用两种方式下载在全局就行了。

查看vue-cli是否安装成功

vue -V

出现这个就表示安装好了，我的版本是4.5.15

如此就可以开始安装vue了。

使用命令

vue create 项目名称

项目叫啥就写啥。其中构造的时候会出现几个选项，我这个是vue2.6的，所以选【default v2】即可。鼠标不能选，只能键盘上下，以及回车。

等其构造完。下面有指令提示，cd 项目，然后 npm run serve 就可以启动项目了。

且看下目录，其中绿色的是我后续加的，黄色代表修改过的

dist先不用看，打包后的，后续会说的 

2.下载插件vue-router

yarn add vue-router@3.5.4

vue-router 3.5.4版本，版本仅做参考，但是最新版本可能不太适用

1）项目加入vue-router

main.js 修改

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/router-config'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

import VueRouter from 'vue-router'

Vue.use(VueRouter)

2）以上使用插件，在new Vue中传入的是router对象，看看router-config中的配置。这个是自己配置的，方便日后添加。方便管理。

router/router-config.js

import VueRouter from "vue-router";

const routeConfig = [
  { path: "/", redirect: "/hello" },
  {
    name: "hello",
    path: "/hello",
    component: () => import("../components/HelloWorld"),
  },
  {
    name: "element-test",
    path: "/element-test",
    component: () => import("../components/ElementTest"),
  },
];

const router = new VueRouter({
  mode: "history", //默认hash
  routes: routeConfig,
});

export default router;

默认/空地址重定向到/hello地址，而hello地址是指向自定义的组件HelloWorld.vue，这边使用函数导入，也可以直接引入组件，配置。两种都可以，至于区别，这里不详细说了。

通过new VueRouter把配置传入，返回一个router对象，也就是这个对象传入到vue中使用。

3）改动 App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

将原有的HelloWorld组件删除掉，因为我们在router会引入，只需要加入一个router-view插座即可，路由到的组件将会替换这个router-view标签。

4）我们在component文件夹下补全一个vue文件，看看效果。因为一个之后还要加入element，所以我这里直接使用element测试。

新建component/ElementTest.vue

<template>
  <div class="ele-box">
    <span>test</span>
  </div>
</template>

<script>
export default {
  name: "ElementTest",
  created() {
  
  },
};
</script>

<style scoped>

</style>

OK，这里就放了一个test在组件里，后续慢慢完善这个。我们在浏览器中修改路径。根据之前的路由配置。

把/hello改成//element-test 发现页面变成test了。说明路由安装以及使用完成了。

提一嘴，路由链接还有<router-link to="xxx"></router-link>等调用路由方式，建议看看vue-router官网在写，这里是最佳实践就不多说了。