vue学习之路（二）vue-cli目录结构分析

总体结构介绍

详细介绍
1.build文件夹（webpack配置）
build文件夹里面最主要是的webpack的相关配置文件，在新一代的vue-cli中，没有dev-server.js文件，因为它被与集成到开发环境配置文件里面了，当我们输入npm run dev启动项目的时候，最先就会启动dev-server，它会检查npm以及node版本，加载配置文件，启动服务。

2.config文件夹（vue项目配置）
config文件夹里面的文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3.node_modules文件夹（依赖包）
node_modules是项目依赖包，里面包括了很多项目依赖。安装方法，在项目文件夹中打开命令行，输入npm install即可安装该依赖包。
一般什么情况下需要安装依赖：
1）当运行项目时提示缺少依赖包，比如外部加载css时需要css-loader，这个就需要我们额外安装。
2）当安装插件时，比如vuex。

4.src文件夹（项目核心文件）
开发时，主要是在src文件夹目录下完成，
1）APP.vue根组件）

App.vue是项目的根组件，一个vue页面又分三个部分组成：【template】、【script】、【style】
【template】：模板
使用vue-cli构建项目的好处就是方便，不用再去声明什么创建模板之类的语句，可以直接写模板内容了，要注意的是，模板中所有内容只有一个根节点。
【script】：JavaScript代码
该部分用于编写JavaScript代码片段，用export default导出。
【style】：css样式代码
该部分主要用于编写css代码
2）main.js（入口文件）

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，components里面就是引用的App组件，如果后期安装了插件或者组件库，例如安装了Element组件库，则需要在main.js文件中引用。
3）router（路由配置）

该文件夹下的index.js则是路由配置文件，“/”则定义的是根路由，当我们进入网页时，展现在我们眼前的是“/”界面。
4）components（组件）

该文件夹下用于存放你自己编写的组件，当需要用时，则只需要在界面引用就可以。
5）assets（资源文件）

一般用于存放需要用到的资源文件，图片居多。
5.index.html文件

主页面文件，main.js里面定义的实例都挂在到根节点下，内容通过vue组件来填充。