二、Vue项目中index.html，App.vue，main.js，index.js，helloWord.vue联系

index.html加载main.js，main.js加载App.vue，App.vue加载路由文件index.js，index.js加载当前根目录的路由对应的存储在component目录里的组件HelloWord.vue。

• index.html是项目入口，通过<div id="app"><div>将main.js中的实例app挂载到了这里

 

• main.js作为项目的入口文件，在main.js里新建了一个Vue实例挂载在id=app的div元素上

知识点：

1.实例化vue的方法：

var vm = new Vue({//实例})

2.实例化Vue中有一个el 参数，它是 DOM 元素中的 id，所以上边的实例化就可以通过id="app"引用

3.实例化中data用于定义属性，method用于定义函数，用return来返回

4.router，即使用router变量 router：router

5.components: { App },为App:App 键值一样可以省写为一个。注册一个名字为App的局部组件

6.template:'<App/>'将App局部组件显示在页面上，而这个局部组件就是App.vue，模板也是用的App.vue的模板

• App.vue中的模板通过html.index挂载显示到页面中，模板中的<router-view/>是将当前路由地址（现在是根目录）对应的内容显示到页面中，即router目录下index.js中根目录引用的组件的内容，如下图

 

• index.js在router目录中就是路由设置文件，指定路由对应的组件，如下图根目录指定了组件HelloWord.vue，所以就会显示组件HelloWord.vue的内容

• HelloWord.vue组件中有一些链接以及文字显示，并且最后有对应的style样式，css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；

最后的运行结果就是综合了index.html加载main.js，main.js加载App.vue，App.vue加载路由文件index.js，index.js加载当前根目录的路由对应的存储在component目录里的组件HelloWord.vue