vue-cli 路由webpack打包过程

vue-cli 路由webpack打包过程

1. 安装cnpm cnpm npm install -g cnpm
2. 安装脚手架 cnpm install -g vue-cli
3. 安装webpack-simple模板 并创建一个demo01的文件夹vue init webapck-simple demo01
4. 进入demo01文件cd demo01
5. 下载webpack-simple的依赖 cnpm init
6. 开启虚拟服务器 npm run dev
7. 下载路由 cnpm install vue-router -S
8. 打开dome01里的main.js

import Vue from 'vue'
import vueRouter from "vue-router"
//引进路由
import App from './App.vue'

Vue.use(vueRouter)
//使用路由
new Vue({
  el: '#app',
  render: h => h(App)
})

9. 在scr里新建components文件。在components文件里新建两个组件文件Mains.vue和Deail.vue
10. 在App.vue里写：

10. Detail.vue 里写：

11. Mains.vue里写：

13. main.js里改为：

import Vue from 'vue'
import vueRouter from "vue-router"
//引进路由
import App from './App.vue'
import routerConfig from './router.config.js'

Vue.use(vueRouter)
//使用路由
const myRouter=new vueRouter(routerConfig)
//新建路由实例
new Vue({
  el: '#app',
  render: h => h(App),
    router:myRouter
    //挂载到vue 上
})

14. src里写一个 router.config.js 配置路由：

import Mains from "./components/Mains.vue"
import Detail from "./components/Detail.vue"
//import 引入 自定名字 路径是‘href’
export default{
    // 暴露文件
    //出口文件
    routes:[
    {path:'/mains',component:Mains},
    {path:'/detail/:xiabiao',component:Detail},
    {path:'/',component:Mains}
]
}