综合了各大技术贴的Vue文件调用关系——保证通俗易懂

vue项目的文件目录结构

1.build：webpack依赖的各种文件，默认生成，不管它；
2.config：配置目录，包括端口等，默认生成，不管它；
3.node_modules：npm依赖的模块，构建此项目时自动引入（因为构建webpack环境时已经安装了npm），默认生成，不管它；
4.src：我们开发的主要地方；
4.1assets：一些资源文件，比如logo图片等；
4.2components：我们写的组件都放在这；
4.3router：路由配置文件；
4.4App.vue：页面切换入口；
4.5main.js：入口文件。
5.其他文件默认生成，可先不管。

项目中各文件的调用

1.核心是通过main.js组织和调配各文件；
2.main.js首先把浏览器页面挂进来（通过#app的方式）；
3.main.js引入页面组件App.vue，核心目的是把它显示到index.html的 id=app 中（因为App.vue中使用了#app，所以可以进行匹配显示），App.vue是组织显示的组件，其中有个router-view，表示当App.vue被引入时，将引入它所在的文件当中的router渲染进去（渲染出什么内容取决于router指向什么东西，当然这只是App.vue通过router-view显示的内容，App.vue还有其他内容）；
4.main.js指向的router文件包含了一个index.js文件。而index.js中又包含了我们自己写的Hello world组件，通过router被渲染到router-view，再通过将router-view所在的App.vue通过#app匹配并替换index.html中的id=app，我们写的组件就被显示出来了（当然同时被显示的还有App.vue中除了router-view以外的其他东西，所以说App.vue是对所有的视图、页面进行组织和管理的组件），而main.js将App.vue、router、#app挂载等这一切东西组织起来了，所以main.js就是我们的入口文件。

第一篇博客，欢迎留言讨论，改天写一篇vue环境的初步搭建。