vue-router 打包笔记

vue-cli 路由webpack打包过程

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

<template>
  <div id="app">
    <router-view></router-view>
//显示组件内容
  </div>
</template>

<script>
export default {
//暴露文件
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js 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>

8. 在scr里新建components文件。在components文件里新建x个xxx.vue文件

<template>
        <div>  
           写考试内容 
      </div>
</template>
<script>
export default{
//暴露一下

}
</script>

9. src里新建一个 router.config.js 文件配置路由举例：

//配置路由
import Main1 from "./components/main1.vue"
import Main2 from "./components/main2.vue"

export default{
    // 暴露文件
routes:[
    {path:"/main1",component:Main1},
    {path:"/main2",component:Main2}
]
}

xx.vue文件有几个配置几个

• src里的main.js:

import Vue from 'vue'
import vueRouter from "vue-router"
import App from './App.vue'
//引配置路由
import routerConfig from "./router.config.js"
//用vueRouter
Vue.use(vueRouter)
//暴露
const myRouter=new vueRouter(routerConfig)
new Vue({
  el: '#app',
  render: h => h(App),
    router:myRouter
//加载到路由实例
})

10. 输入命令cnpm run dev启动服务器

• 如果没有webpack则下载webpack 输入cnpm install webpack -g下载webpack
• 下载完成在执行webpack
• 然后输入webpack把dist文件编译出来。因为最后引入index.html的是dist文件
• 最后把index.html里的dist文件路径改一下就ok，去掉dist前面的/就OK了