vue-cli 路由webpack打包過程

1. 安裝cnpm cnpm npm install -g cnpm
2. 安裝腳手架 cnpm install -g vue-cli
3. 安裝webpack-simple模板 并創(chuàng)建一個(gè)demo01的文件夾vue init webapck-simple demo01
4. 進(jìn)入demo01文件cd demo01
5. 下載webpack-simple的依賴 cnpm init
6. 開啟虛擬服務(wù)器 npm run dev
7. 下載路由 cnpm install vue-router -S
8. 打開dome01里的main.js

import Vue from 'vue'
import vueRouter from "vue-router"
//引進(jìn)路由
import App from './App.vue'

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

9. 在scr里新建components文件。在components文件里新建兩個(gè)組件文件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:"有重復(fù)的數(shù)據(jù)",
                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"
//引進(jìn)路由
import App from './App.vue'
import routerConfig from './router.config.js'

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

14. src里寫一個(gè) 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}
]
}