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"//用vueRouterVue.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了

原著是一个有趣的人,若有侵权,请通知删除