一、简介
1. 本文主要介绍vue cli2自动生成的项目结构的解析；
二、项目结构
1. 上图是项目的整体目录结构。我们读这个项目结构的时侯要先从package.json开始读，首先是看package.json中的scripts中的build，可以看出来它是执行 node build/build.js， node是可以直接执行文件的。
所以我们去看看build.js。这里介绍一下，package.json中用到的相对路径都是以自己的位置来进行相对路径的读取，所以build.js是位于这个位置的：
在build.js中我们可以看到一些代码，我现在还看不太懂那些代码的含义，但是我大概知道它会做两个事情，第一，它会去删除上一次打包后输出在dist文件夹中的内容。第二，它会去找到webpack对应的配置文件，根据配置文件进行相应的打包。
三、项目的文件夹解析：
(1) build: build.js的大概作用上面介绍了。webpack.base.conf.js是webpack的公共配置；webpack.dev.conf.js是开发时配置；webpack.prod.conf.js是发布时配置；这三个文件的作用可以看看我记录的这篇文章：webpack.config.js的分离。
(2) config: 该文件夹中主要都是一些变量的配置，比如index.js，里面会有一些变量的配置，这些变量会被上面的builid文件夹里面的js文件所引用。当然了，index.js中的变量值也是可以自定义改变的。所以说config文件夹和build文件夹都是webpack的相关配置。
(3) node_modules: 该文件夹中存放的是项目依赖的包，比如我们在package.json的devDependences和Dependences中写的依赖进行安装之后就会存放到node_modules中。
(4) src: 我们平常写的代码就是放到src里面的。
(5) static: 存放静态资源的地方，放到这里的静态资源会原封不动的输出到dist文件夹中，不会被打包。
四、项目的文件解析：
(1) .babelrc：我之前记录过一篇:webpack 将es6转为es5 ，可以先看一下那篇文章在回过头来；.babelrc主要就是对哪些浏览器可以进行es6转es5进行了限制。看下图，它的意思就是，如果该浏览器占市场的份额大于1%且该浏览器的版本是它的最新的两个版本之一，那么可以进行es6到es5的转换。如果该浏览器是版本小于8的IE浏览器，那不要直接不考虑转换。总之，.babelrc就是在进行es转换的时候需要读取的配置文件。
(2) .editorconfig: 该文件主要就是对代码进行一些统一的设置，更多具体的配置及作用可以百度看看其他的大佬写的博客。
(3) .eslintignore: 表示我们在写代码的时候，有些文件夹里面的代码就算写的不太规范，但是我们也可以忽略它的不规范。那么哪些地方有这个特权呢？就是在这个文件里面配置。
(4) .eslintrc.js: 配置文件，用于设置如何进行代码检查。
(5) .gitignore: 表示当我们向服务器上传东西的时候，有些东西是可以不要上传的，可以在该文件中配置哪些东西不上传。
(6) .postcssrc.js: 项目在进行css转换的时候，所需要读取的配置文件。
(7) index.html: html文件的一个模板，打包的时候会以这个index.html为模板生成一个html文件放入dist文件夹中。
(8) package.json: 主要用于对项目所依赖包的配置和一些指令的设定(scripts属性)。
(9) package-lock.json: 记得在package.json中有DevDependences中有类似~3.1.0或者∧3.1.0。~和∧的含义不同，~表示安装依赖的版本是大于3.1.0但是小于3.2.0 ,也就是3.1.x ， 大版本号和次版本号不变；∧表示安装的版本是大于3.1.0但是小于4.0.0的，也就是3.x.x，大版本号不能变。所以我们知道当在这里使用了这两个符号之后，安装依赖的版本是一个范围，那么到底最终它安装的是哪个版本的呢？package-lock.json就是记录项目最终安装的依赖的版本是哪个的。
扫一扫
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
