vue-cli目录结构
在开发项目之前，需要先弄明白 vue-cli 的目录结构和运行机制，要知道 7.1 节看到的页面是怎么展现出来的。
项目下的文件介绍如下。
（1）build和config文件夹分别是Webpack配置目录和Vue配置目录，做项目时一般不会修改它们，在项目做好之后打包的时候，有可能操作这两个目录，所以开发时不需要注意这两个文件夹。
（2）node_modules文件夹：相当于第三方库，通过npm安装的依赖包都会在node_modules文件夹中，因此比较重要。
（3）src文件夹：重要，基本上所有代码都要在src下面操作。
展开 src 文件夹。
-
显示用户名
-
assets文件夹：存放静态资源（JS、CSS、images）。
-
components文件夹：存放公共组件。
-
router文件夹：存放路由匹配规则。
-
App.vue：入口组件。
-
main.js：入口JS文件。
-
static文件夹：存放静态文件。
-
babelrc：用于解析es6代码。
-
editorconfig：定义代码格式（编辑器用的）。
-
postcssrc：CSS转换工具，类似less，sass的预处理器。
-
package.json：记录npm install安装模块的版本号、项目名称等（重要）。
-
package-lock.json：记录安装模块的版本号和来源（下载地址）。
assets 和 static 的区别如下。
-
assets 目录会被 Webpack 处理，图片变成 base64 格式。
-
static 不会被 Webpack 处理，直接复制到最终打包的目录。
建议把 JS、CSS 放到 assets 目录下面，因为被 Webpack 压缩处理之后，它们的体积就变小了，有利于提升页面的加载速度。
要把第三方静态文件放到 static 目录下面，如一些字体文件。第三方的静态文件一般都是被处理过的，无须再让 Webpack 进行压缩处理。
图片：大图片建议放到 static 目录下，小图片建议放到 assets 目录下。