vue学习 vue项目结构图解 vue webpack项目图解

 

1 上面 router/index中的代码揭示了一个事情:  默认路径 /  导航到  HelloWorld.vue 中

2 App.vue和main.js 共同构成了一个入口文件, App.vue里面配置了一些常用的logo等,App.vue不会随着router的导航而消失

  因为他是入口文件,所以一直在单页面应用中显示。

3  App.vue中的<router-view/>其实是说路由后的页面在这里显示,而App.vue是铁打的营盘不会变的。

4 main.js其实是App.vue主页对应的js,他组装了主页App和路由器router,将来让路由后的页面比如Helloworld在<router-view/>处显示

 

 

 

1. components：{App}应该是在main.js入口文件中吧，这样的话App应该是App.vue组件中通过export default导出APP变量出来的，然后在main.js中通过import 导入App变量
2. components：{App} 写法是ES6的写法，在对象中，如果键值对一样的话，只写一个就可以
3. template: '<App/>' 这里面也涉及到一个简写的处理，如果你不在组件上面添加属性或者指令的话，你就可以写成但标签的形式 <App/>其实就是 ‘ <App><App/>’
4. <App>标签又在哪里呢 <App>这样写就是代表APP这个组件 template: '<App/>'就是代表使用APP组件的模板