首先认识一下vue的目录结构。vue是一个组件化开发的语言，组件之间是有父子关系的，还有一种关系叫全局组件和局部组件。
App.vue可以被认为是所有组件的父组件，它也是整个页面的入口文件，是之前提到过的body。其它组件被放在src->components里面，文件后缀都是.vue。HelloWorld.vue就是一个组件，初始化的模板为我们提供了一种方法，实现了组件的挂载：路由。
问题：初始化的模板是如何将HelloWorld.vue挂载到app.vue的？
<router-view/>
问题：<router-view/>路由指向哪里？在哪里定义的指向？
在router目录下的index.js文件中定义了路由。
首先index.js先import vue-router，保证在此js文件可以识别vue-router的语法，然后导入了HelloWorld.vue这个组件。Vue.use(Router)代表使用路由。
export default new Router初始化了一个默认的路由，在Vue中，path:'/' 代表了最顶层的路由，也就是所有组件的父组件app.vue调用的路由路径，可以看到路由指向了HelloWorld组件。
图1-2 app.vue中，<router-view/>的作用就体现了出来，将<div/>显示的内容指向了路由，路由文件index.js将路由指向了HelloWorld.vue，这样就完成了组件的挂载。
了解了组件是如何挂载的，接下来了解组件是如何通信的。
一个完整的vue项目组件之间的关系是十分复杂的，会层层嵌套组件。所以在原则上，vue是不允许数据双向流动的，意思就是只允许父组件的数据传递给子组件，子组件的数据不允许传递到父组件，这样保证了数据的单向流动性。
凡事都有例外，如果真的需要子组件向父组件传递数据，需要子组件触发Emit Event(发出事件)。
组件内部通信Demo：实现购物车商品加减按钮。
①新建一个组件Counter.vue.
②初始化两个button，“+” 和 “-” ，中间为显示的数字。
③初始化两个method:increment和decrement来实现num的“加”和“减”，并初始化num的数值为0。
④将method绑定在button上，并用“点击”事件触发。
⑤让HelloWorld.vue加载Counter.vue
打开HelloWorld.vue。用import Counter from './Counter'来加载Counter组件。" ./ " 代表同一级目录。
⑥在Script中加载components.
⑦调用组件Counter.然后看一下效果~！
