Vue项目的详细目录结构解析

文章目录
前言 —— 一级目录解析
一. dist
二. node_modules
三. public
四. src（基础版）
4.1 main.js
4.2 App.vue
4.3 src / assets
4.4 src / components
五. src（顶配版）
5.1 src / plugins
5.2 src / store
5.3 src / router
5.4 src / views
六. tests
七. .gitignore
八. README.md
九. ...（其他依赖的独立配置信息文件）
附：详细目录结构树
写在最后
前言 —— 一级目录解析
我们在使用Vue CLI 4.0工具创建出一个新的项目后，它最基本的一级目录结构往往是这样子的：

vue-demo
├── dist  //项目构建后的输出目录
├── node_modules
├── public
├── src
├── tests  //选装：测试模块
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── ...

dist —— 项目构建打包后的默认输出目录。查看详情 ->
node_modules —— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->
public —— 存放公共资源和项目的主入口文件index.html。查看详情 ->
src —— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->
test —— 选装了测试模块（Unit Testing / E2E Testing）才会有的文件夹。查看详情 ->
.gitignore —— Git上传时需要忽略的文件目录；查看详情 ->
package-lock.json —— 版本管理使用的文件；
package.json —— 项目的基本配置信息文件，包括各种插件，依赖以及某些依赖的详细配置等（如果你选择保存在这个文件内的话）；
README.md —— 项目的描述文件。查看详情 ->
... —— 某些依赖配置信息的独立文件。查看详情 ->
一. dist
dist文件夹在新建项目中一开始并不会存在。只有当你执行过一次构建命令（build）后，才会创建。通常它的内部目录结构为：

vue-demo
├── dist  //项目构建后的输出目录
│   └── css
│   └── img
│   └── js
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源

这就是我们之前很熟悉的原生开发阶段的目录结构。也是浏览器能直接识别的文件类型。而我们现在使用的Vue.js等框架开发的项目，并不能为浏览器所识别，所以就需要编译打包这一步操作，来转换成实际生产环境（浏览器）所需的文件。

npm run build

该目录文件夹的名称是可自由设置的。比如在Vue UI中直接修改：

有关Vue UI的具体使用可翻上一篇：

【 Vue全家桶 · Vue CLI（三）】使用可视化的Vue项目管理器（Vue UI）来创建、开发和管理你的项目

二. node_modules