一.基本流程
1.1 逻辑图+目录结构图
逻辑解析：index.tml->main.js->app.vue->index.js->helloworld.vue。
- npm run dev后，main.js会添加到index.html中。
main.js使用el：#app链接到index.html中的app，并使用template引入组件<app>和路由相关的内容（具体的涉及到vue的语法规则，如果不理解的先记下来吧，继续往后看，等了解vue的相关内容后，可能会更清晰）。也就是说通过main.js我们关联到App.vue组件，接着，我们继续看一下App.vue组件中的内容。
- main.js作为入口文件，作用是初始化vue实例，并引入所需插件，用APP.vue替换index.html中的id=’app’的div
- APP.vue作为主组件，所有页面都在APP.vue下进行切换，<router-view/>
- Index.js vue路由会监听url变化，通过路由配合找到相应组件，加载到<router-view/>
1.2 实例与组件区别
1. vue实例会比vue组件多出el和router属性
2. vue组件的data会被要求必须是函数，防止出现同种组件多实例共享同一个data的事情
1.3实例生命周期
beforeCreate:创建前
1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading
2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问
created:创建后
1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性
2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上，同时
会将data中所有的属性添加一个getter/setter方法
3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用
beforeMount:挂载前
(渲染)
render函数初次被调用---->数据和模板没有进行相结合，同时还没有渲染到html页面上
可以在此做渲染前data中数据最后的修改
mounted:挂载后
1、数据和模板进行相结合，渲染成真实的DOM结构
2、在当前生命周期函数里面我们可以访问到真实的DOM结构,
3、在vue中我们可以通过$refs来访问到真实的DOM结构
4、ref类似与id一样 值必须是唯一的 访问的时候我们可以通过this.$refs.属性
beforeDestroy:销毁前
销毁之前还可以访问到DOM结构 以及相关的数据(data)
在这个生命周期函数中我们可以将绑定的事件进行移除
destroyed:销毁后
在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)
在这个生命周期函数中我们还是可以访问到data中的属性
但是访问不到真实的DOM结构了
beforeUpdate:更新前
只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行
在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据
updated:更新后
在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据
二.注意点
2.1 组件文件中<template><div></div></template> template下需要一对div标签作为根路径否则报错
2.2