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里写：

<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: left;  color: #2c3e50;  margin-top: 60px;}</style>

10. Detail.vue 里写：

<template>             <div>              <h1>{{arr}}</h1>            <h2>索引是{{this.$route.params.xiabiao}}</h2>        </div></template><script>export default{//暴露一下data:function(){            return{                arr:""            }        },        beforeMount:function(){            this.arr=this.$route.params.xiabiao;        }}</script>

11. Mains.vue里写：

       <template>            <div>                <h1>                    this is my list                </h1>                <input type="text" v-model="TypeValue">                <button @click="adds()" :disabled="flg">add</button>                <p v-show="flg">{{no}}</p>                <ul>                    <li v-for="(value,index) in num"><router-link :to="'/detail/'+index">{{value}}</router-link></li>                    <!--<li v-for="(value,index) in num"><router-link to="/datai/pp[p/p;pl">{{value}}</router-link></li>-->                </ul>                </div>        </template>        <script>        export default{        data:function(){            return{                num:['10','20','30'],                TypeValue:"",                no:"有重复的数据",                flg:false            }        },        watch:{          TypeValue:function(){              if(this.num.indexOf(this.TypeValue)==-1){                  this.flg=false              }else {                  this.flg=true              }          }        },        methods:{            adds:function(){                this.num.push(this.TypeValue);                this.TypeValue='';            }        }    }        </script>

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}]}

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