vue项目通过脚手架搭建起来后，就是路由
我的src里：
assets:放置静态的文件 css js img 文件夹
components：组件文件夹 一般放公用的组件
view:主要的组件存放文件夹（这里的层级可能比较深）
router/index.js:路由文件 （很重要）
main.js：入口文件
App.vue:入口组件（这个组件其实是嵌套在最外层的index.html 的<div id="app"></div>里面）
最外层的index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>myproject</title> 7 </head> 8 <body> 9 <div id="app"></div> 10 <!-- built files will be auto injected --> 11 </body> 12 </html>
src里的App.vue 这个组件将在最外层的index.html里的<div id="app"></div>里展示 ，这里有3个按钮分别绑定了不同的事件，点击那个按钮，对应的组件讲在展示区域<router-view/>展示，同时<router-view/>消失
1 <template> 2 <div id="app"> 3 <div class="btns"> 4 <button @click="toHome">Home</button> 5 <button @click="toHello">Hello</button> 6 <button @click="toAbout">About</button> 7 </div> 8 <router-view/> 9 </div> 10 </template> 11 12 <script> 13 export default { 14 methods:{ 15 toHome(){this.$router.push({path:'/home'})}, 16 toHello(){this.$router.push({path:'/hello'})}, 17 toAbout(){this.$router.push({path:'/about'})} 18 } 19 } 20 </script> 21 <style scoped> 22 23 </style>
一个js文件中，只能有一个export default； 但是，一个js文件中，可以有多个export。 export defaul抛出对象
main.js:需要的插件 从这里被引入，并实例化一个vue对象，同时把引入的APP 、router等挂载到这个实例下，这个实例相当于是链接 index.html里的div#app 与 template: '<App/>（App.vue组件）的桥梁，components: { App }是注册组件，注册了才可以用
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6 7 Vue.config.productionTip = false 8 9 /* eslint-disable no-new */ 10 11 new Vue({ 12 el: '#app', 13 router, 14 template: '<App/>', 15 components: { App } 16 });
router / index.js:路由文件
1 //引入插件 2 import Vue from 'vue' 3 import App from '@/App' 4 import Router from 'vue-router' 5 6 7 Vue.use(Router)//注册插件 8 9 //定义组件并引用 10 import Home from '../components/Home' 11 import Hello from '../components/Hello' 12 import About from '../components/About' 13 14 //创建实例 配置路由规则 并暴露出去 15 export default new Router({ 16 routes: [ 17 {path: '/',redirect: '/Home'}, 18 {path: '/Home',component: Home}, 19 {path: '/Hello',component: Hello}, 20 {path: '/About',component: About} 21 ] 22 })
conponents / About.vue
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'About', 10 data () { 11 return { 12 msg: 'About' 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style scoped> 20 h1{ 21 width: 200px; 22 height: 200px; 23 background-color: purple; 24 color: #fff; 25 line-height: 200px; 26 text-align: center; 27 } 28 </style>
conponents / Hello.vue
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Hello', 10 data () { 11 return { 12 msg: 'hello啊' 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style scoped> 20 h1{ 21 width: 200px; 22 height: 200px; 23 background-color: purple; 24 color: #fff; 25 line-height: 200px; 26 text-align: center; 27 } 28 </style>
conponents / Home.vue
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 <div class="scope">{{love}}</div> 5 <button @click="res">{{"按钮"}}</button> 6 </div> 7 </template> 8 9 <script> 10 export default { 11 name: 'Home', 12 data() { 13 return { 14 msg: '这是主页', 15 love:"输出我吧，我喜欢你" 16 } 17 }, 18 methods:{ 19 res:function(){this.msg=this.msg.split('').reverse().join('')} 20 } 21 } 22 23 </script> 24 25 <!-- Add "scoped" attribute to limit CSS to this component only --> 26 <style scoped> 27 h1{ 28 width: 200px; 29 height: 200px; 30 background-color: purple; 31 color: #fff; 32 line-height: 200px; 33 text-align: center; 34 } 35 </style>
最后总结自己理解的：
入口文件 main.js 里 引入了 入口组件（import App from './App'） 引入了vue对象（import Vue from 'vue'）引入了路由（import router from './router'）实际情况我们还会引入 mui 框架 和 vuex 等其他插件，然后实例化vue，将index.html里的div#app挂载在实例下，
注册入口组件：并挂载到实例下，需要的插件框架之类的在main.js引入后就都可以挂载在这个实例下面，然后就可以生效了，其他组件也就可以用起