vue-cli +webpack+node 创建的项目目录深度解析

项目包含主要目录如下：

1.build：包括8个文件。

build.js: 项目完成后打包的入口文件。打包生成的包目录为/dist。此目录原本不存在，打包后会自动生成。

check-version.js: 检测当前安装的node.js,npm版本是否适合，若版本过低，会给出提示。

logo.png : 项目的logo图片。

util.js : 提供工具函数，包括生成处理各种样式语言的loader，获取资源文件存放路径的工具函数。

vue-loader.conf.js : 引入了utils.js ，应该是用于切换开发模式和生产模式的文件，以便于用不同模式来解析loader。

webpack.base.conf.js : 此配置文件是vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置。

webpack.dev.conf.js：在webpack.base.conf的基础上增加完善了开发环境下面的配置。

webpack.prod.conf.js：构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。

2.config :  包含webpack环境配置文件。该目录包含4个文件。

index.js : 描述了开发和构建两种环境下的配置。

dev.env.js: 开发环境配置。

prod.env.js : 生产环境配置。

test.env.js ： 测试环境配置。

3.node_modules : 存放npm 加载的项目依赖模块，以后通过npm 安装的依赖也在这个里面。

4.src :放置组件和入口文件。

  assets: 主要存放静态图片和js文件资源。

components: 存放开发需要的各种组件，各个组件联系在一起组成一个完整的项目。

router : 存放路由文件。

App.vue : 项目入口组件，之后会被渲染到项目根目录的index.html中显示出来。

main.js : 入口文件，引入了vue模块和app.vue组件以及路由router，该处也会定义全局使用的变量。

注：项目要调接口，可在其中加api目录。需要填加页面，可增加views 目录。

5. static ：存放项目静态文件，存放需要使用的一些外部的js,css文件，需要使用的时候从这里引入到文件内。

6.test :  用于测试的目录.

 unit ：单元测试，可为每个组件编写单元测试，放在test/unit/specs目录下，单元测试用例的目录结构建议和测试的文件保持一致，每个测试用例文件名以.spec.js结尾，

执行npm run unit 会遍历所有的spec.js文件，产出测试报告在test/unit/coverage目录。

e2e : e2e获取端到端或者UI测试是用来测试一个应用从头到尾的流程是否和设计时候所想的一样。

7. 根目录下的如下文件：

babelrc : es6语法编译配置。（没有该文件项目会报错）

.editorconfig : 代码编写规格。（没有不会报错）

.eslintignore : 项目的根目录中创建文件来告诉eslint 忽略特定的文件和目录，该文件是纯文本文件。

.eslintrc.js : eslint 的配置文件，eslint 是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件，当有不符合配置文件

内容的代码出现就会报错或者警告。

.gitignore: 忽略的文件。

.postcssrc.js : 兼容选项 （如果已经安装postcss,需要一大堆loader配置，这市项目根目录会生成‘.postcssrc,js文件’）。

index.html ；项目文件入口。

package.json: 项目及工具的依赖配置文件。

README.MD : 项目说明。

 

 

内容来自：https://www.cnblogs.com/vuenote/p/9323831.html