shangzhaopeng/shangzhaopeng.github.io

使用vue-cli过程

shangzhaopeng.github.io

vue-cli 路由webpack打包过程

安装cnpm cnpm npm install -g cnpm 安装脚手架 cnpm install -g vue-cli 安装webpack-simple模板 并创建一个demo01的文件夹vue init webapck-simple demo01 进入demo01文件cd demo01 下载webpack-simple的依赖 cnpm init 开启虚拟服务器 npm run dev 下载路由 cnpm install vue-router -S 打开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里写：

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

Detail.vue 里写：

{{arr}}

索引是{{this.$route.params.xiabiao}}

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

Mains.vue里写：

this is my list

<button @click="adds()" :disabled="flg">add

{{no}}

• {{value}}

<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> 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 上 })

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