Vue--创建项目及自己配置路由

1). 创建项目

vue create myapp02

2). 添加一个配置文件

vue.config.js

module.exports={
  lintOnSave:false,
  devServer:{
    port:8080
  }
}

3). 启动项目

yarn serve

4). 删除 component下的所有*.vue
5). 删除 App.vue 下的内容

  <template>
  <div id="app">
   
  </div>
</template>

6).在src目录下添加一个 views的文件夹 视图区域

7).安装 vue-router 模块

yarn add [email protected]

8).在src目录下,添加一个 router文件夹,添加一个index.js
代码如下

//1.导入路由模块
//ES6模块 ESM ---ecma script module  
//ES6. imrpot xxx from 'xxx'    -->  export default xx
//nodejs        require(xxx)      --> module.exports
import VueRouter from "vue-router";
//2.导入vue模块
import Vue from "vue";
//nodes 导入模块
// const vue =require("vue-router")
//3.把路由类 挂载到vue上
Vue.use(VueRouter);

//5.导入视图组件  // @ --> src
import Home from "@/views/home.vue"
import Login from "@/views/login.vue"

//4.实例化路由
const router = new VueRouter({
   //路由的模式
   mode: "hash",
   //配置路由的规则,规则是多条,带s,是一个数组
   routes: [
       { // route
           path: "/home",
           component: Home
       },
       {
           path: "/login",
           component: Login
       }
   ]
})

//暴露路由管理对象  
// router > routes > route
// 管理      规则     单个路由(单个路由)
export default router;

9).在 main.js 导入 路由

// @ --> src
import router from "@/router"
new Vue({
    router
})

10). 在App.vue下,添加路由的出口(显示组件)

  <router-view></router-view>