index.html为页面模板，vue组件都在这个页面上面进行渲染。
main.js是整个vue项目的入口，对index.html中id挂载点进行处理并引入需要的各个vue组件。
import ** from 'xx' 这句为引入组件，**为定义的名字，xx为路径。
Vue.use(**);使用**组件。
new Vue({ //创建vue实例
el:'#app', //挂载点，在index.html中id=“app”这个位置，所有的处理都是对id=“app”的div进行处理填充。
router，注入路由，对应的路径为相同路径下的router，这里面有个index.js文件，如下：
export default new Router({ //定义router实例
routes: [
{
path: '/',
name: 'Login', //应该是组件名，查了一下有说什么条状的依据，不是很懂，有没有都可以类似于input的name属性
component: Login //引入的组件，路由最终会跳转到这个组件中，路径在import中，如下：
Login.vue路由跳转的组件，登陆页面在这里进行设计，代码是我复制过来的就不解析了重要的是流程
main.js中剩下的两个属性
components: { App }, //定义组件名字是App
template: '<App/>' //组件为App.vue如下：
这个组件做了一件事，路由跳转，<router-view/> 会跳转到定义的路由中的Login组件
}
]
})
})
大概流程应该是：main.js中注入定义好的路由（路由在router下面的index.js定义）然后调用App组件， 在App组件中通过<router-view/>跳转到Login.vue组件，而Login.vue组件是登陆页面，最终在index.html<div id="app"></div>这一部分显示的是Login.vue的内容。最终显示的页面如下：
刚开始学，这只是个人的理解，欢迎大家补充。
833
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
