Vue(二)——工程的目录结构及文件执行顺序

一 工程的目录结构

1   结构中各文件夹的功能

 build：用于存放webpack相关配置与脚本。开发中偶尔使用此文件夹下的webpack.base.conf.js文件，用于配制less、sass等css预编译库，或者配置UI库

config：存放配置文件。此文件夹下config.js配置开发环境的端口号、是否开启热加载等功能

dist：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

node_modules:存放npm命令下载的开发环境和生产环境的依赖包。

src：存放项目源码以及需要引用的资源文件。

2  src文件

assets：存放项目中需要用到的资源文件，css、js、images等

componets：存放vue开发中一些公共组件，如：header.vue、footer.vue等

emit：自己配置vue集中式事件管理机制

router：vue路由的配置文件

service：请求后台的接口方法

page：存放vue页面组件的文件夹

util：存放vue开发过程中一些公共的.js方法

二   关于main.js、index.html、index.js、App.vue

一张很经典的图

main.js：程序的入口文件，它初始化了vue实例、使用需要的插件、加载各种公共组件

App.vue：是根组件，页面的入口文件，构建一些全局通用的style，以及做组件的归集

index.html：是vue项目的默认首页，里面默认引用了app.vue根组件

index.js：存在于router下，用于设置路由

1  vue加载时文件的执行顺序

   执行index.html文件

   执行main.js文件

   main.js挂载了app.vue文件，用app.vue的templete替换index.html中的<div id="app"></div>

   main.js中注入了路由文件，将对应的组件渲染到router-view中

   router-view中加载Layout文件

   Layout 加载Navbar, Sidebar, AppMain