在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之二（nodejs、vue-cli等环境安装）》中，我们通过安装 nodejs 系统环境，以及 vue-cli 脚手架工具，在执行完命令后，我们就已经将一个初始项目跑起来了。
那么这篇文章，我们就来认识下项目中的各文件夹及里面的文件，它们是什么，以及它们的作用。
话不多说，开干。
项目初始文件解读
1 ├── node_modules # 项目依赖包文件夹 2 ├── build # 编译配置文件，一般不用管 3 │ ├── build.js 4 │ ├── check-versions.js 5 │ ├── logo.png 6 │ ├── utils.js 7 │ ├── vue-loader.conf.js 8 │ ├── webpack.base.conf.js 9 │ ├── webpack.dev.conf.js 10 │ └── webpack.prod.conf.js 11 ├── config # 项目基本设置文件夹 12 │ ├── dev.env.js # 开发配置文件 13 │ ├── index.js # 配置主文件 14 │ └── prod.env.js # 编译配置文件 15 ├── src # 项目源码编写文件 16 │ ├── App.vue # APP入口文件 17 │ ├── assets # 初始项目资源目录，回头删掉 18 │ │ └── logo.png 19 │ ├── components # 组件目录 20 │ │ └── Hello.vue # 测试组件，回头删除 21 │ ├── main.js # 主配置文件 22 │ └── router # 路由配置文件夹 23 │ └── index.js # 路由配置文件 24 └── static # 资源放置目录 25 ├── index.html # 项目入口html模板 26 ├── package.json # 项目依赖包配置文件 27 ├── .babelrc # babel 配置 28 ├── .postcssrc.js # postcss 配置 29 ├── .editorconfig # editor 配置 30 └── README.md # 项目说明文档
好，以上就是项目完整的文件目录结构。
其实，我们开发的时候，主要就是操作 src 里面的文件，不过开发的时候，还需要我们重新整理下里面的文件。
另外 static 资源目录，我们也需要根据放置不同的资源，在这边构建不同的子文件夹。
配置src和static目录
现在配置 src 目录，也可以根据自己的实际需求配置目录：
1 ├── api // 接口调用工具文件夹 2 │ └── index.js 3 ├── components // 组件文件夹 4 │ ├── header.vue 5 │ └── footer.vue 6 ├── config // 项目配置文件夹 7 │ └── index.js // 项目配置文件 8 ├── page // 页面文件夹 9 │ ├── content.vue // 内容页面 10 │ └── index.vue // 首页列表 11 ├── router // 路由配置文件夹 12 │ └── index.js 13 ├── style // scss 样式存放目录 14 │ └── style.scss // 主样式文件，可以按分类创建多个文件夹 15 └── utils // 常用工具文件夹 16 │ └── index.js 17 ├── App.vue // APP入口文件 18 └── main.js // 项目配置文件
接下来，我们配置 static 目录，比较简单，适用于绝大多数项目：
1 ├── css # 放第三方的样式文件
2 ├── font # 放字体图标文件
3 ├── image # 放图片文件，里面可以根据图片种类创建文件夹
4 └── js # 放第三方的JS文件，比如datepicker
可能有人会疑惑，src 目录里面已经包含样式和JS，为什么还要在 static 文件里面放置呢？
因为，如果是放在 src 目录里面，则每次打包的时候，都需要打包的。但是 static里面的文件，我们一般是不会去修改的，也没必要 npm 安装，直接引用就好了。
好了，本篇文章就这么多，下节就开始实战吧！