通过 vue-cli 生成一个 vue 的初始项目之后。我们用编辑器打开这个文件夹，目录结构如下图：

认识一下目录结构：

1. build

build目录下的文件是一些webpack 的配置（比较重要的文件就是build/webpack.base.conf.js）。

webpack 是干嘛的

很快就会看到，在你的前端项目里有以.vue为后缀的文件，除此之外，随着项目的进行你可能会用到 css预处理器（scss、less、stylus），也可能会使用typeScript、ES2015，还会用到一些外部工具库。

然而，我们最终要放到生产环境的只是js、html、css以及图片、字体等资源）而已。

这就要用到webpack了，它会（根据文件之间的依赖关系）对你的前端项目进行打包，得到你想要的内容。 其工作方式如下图：

2. config

config里主要是与资源路径和dev-server相关的设置（比较重要的文件是config/index.js）。

dev-server又是啥?

我们之所以可以通过localhost:8080访问页面就是因为在npm start之后，在本地启动了一个dev-server。如果想对其进行更改，就可以到 config/index.js 里设置。

3. node_modules

这个文件夹里是当前项目所安装的各个依赖

通过npm install的外部依赖，都会放到这个目录下，一般来说开发过程中并不需要对这个目录作改动，而且它通常也是被加入到 .gitignore 中

4. src

src 目录就是我们放置业务代码的地方了。

src 文件夹下：

4.1 main.js

在这个文件里创建了 vue 实例，是 vue 项目的入口文件。（引入了App.vue）

4.2 App.vue

是项目的根组件，从这个组件开始引入我们需要的各个组件

4.3 components

项目中用到的组件可以写在这里

当然你也可以自己安排组件的组织方式，我的习惯是把与 router 直接相关的组件放到一个新建的 pages 文件夹下，而把一些通用的组件放到 components 下

4.4 router

配置了项目的路由信息

4.5 assets

放置各种资源（图片、字体等）

5 index.html

根目录下的 index.html 是我们最终要用到的 html 文件。build 好的 js 文件会被引入到这个 html 文件内。