@Candy vue学习笔记之项目结构分析（二）

第一步

以3.0及以上版本为例，以下为基础的项目结构图：

public 目录下是vue 项目整个程序入口，一个index.html文件中只包含一个id为app的空div块，views文件夹下的内容会根据配置加载到index.html文件中。index.html文件原则上不做修改。
src 目录下包含三个文件夹assets用来放背景图。components中定义组件。views中定义视图。视图是由一个或多个组件组成的。js和css文件可以放在assets下，也可以和assets文件夹并列。
package.json文件：dependencies和devDependencies两个标签可以查看项目已经导入了哪些依赖。其他标签的含义后续补充。
main.js文件：主要的配置文件，引入了一些公共的组件，比如vue、router和store。（router和store的作用还有待补充）；实例化了一个vue ，通常一个项目只能有一个实例化vue。（具体原因还有待补充）比如后期需要引入vuex和iview等，都是可以在该文件中配置的。
router.js文件：配置动态路由的文件，比如配置“/”跳转到登录页。
store.js文件： vuex的相关配置。（此知识点后续会出专题详细讲解）

vue 项目加载的过程：首先加载index.html文件中的div组件，根据id 值会找到相同id的vue组件，App组件中展示的内容是根据动态路由来加载的。动态加载路由，需要使用标签：。根据匹配router.js中的路径和vue组件的对应关系，来动态的将不同的组件挂载到App组件中。