Vue全家桶系列之Vue-cli(二)

1.前言

上篇文章说了vue-cli安装和启动，并且说了下项目源码的目录结构，这篇文章我们来主要说下整个项目的目录结构！

2.项目目录结构

先来看下整个目录结构，看下图!

build文件夹其实是一些webpack配置相关的，里面的js文章下篇文章我会详细讲解！

config其实是生产环境和开发环境的一些配置参数！

node_modules是安装的第三方依赖！

src是我们做项目的时候写的源码，里面有个vue结尾的是单文件组件，这个目录下的文件会被webpack进行进一步处理！

static文件是放一些第三方的资源的，里面有个.gitkeep文件，一般我们创建一个空白文件夹，我们提交项目是提交不上去的，它会忽略掉空白文件夹，如果我们想让空的文件夹也提交上去，那么就需要在空的文件夹里面创建这个.gitkeep文件！

我们做项目的时候，其实会用到es6的语法，有些浏览器并不支持，所以需要把es6的语法转成es5的，还有一些语法是在草案阶段的，浏览器还并没有实现，如果想用，也需要把草案阶段的语法转成es5的 让浏览器支持，那么我们用到一个编译器就是.babel，那么它就会去项目里面找.babelrc这个文件并读取里面的配置，接下来来看下配置

首先presets是个预设的意思，预设可以对它进行预设插件，其实es6转es5是用到各种各样的插件，其中有个插件是env，我们可以在node_modules里面找到babel-preset-env，再找到package.json，可以看到各种依赖，里面的依赖都不同的功能的，其实就是一个es6转es5的插件，随便找一个"babel-plugin-transform-es2015-arrow-functions"，这个很熟悉吧，把箭头函数转成es5的，其他的有兴趣的可以自己慢慢去研究

modules是配置模块的风格的，我们知道模块有cmd,amd,umd,commonJs等，modules：false的意思是es6转成es5的时候不使用任何的编码风格，当然你想cmd风格你可以modules：cmd，target是针对浏览器版本的配置，大部分时候，我们要针对的都是特定范围的浏览器，"> 1%"意思是大于市场占有比例的百分之的浏览器，"last 2 versions"意思是支持最新的两个版本，"not ie <= 8"的意思是不支持ie8,stage其实是草案阶段的，草案分四个阶段 0,1，2,3，如果stage-0的意思就是包含0-3（4个）阶段的，所以stage-2，只包括2和3阶段的，所以你可以看下 node_modules里面只有babel-preset-stage-2和babel-preset-stage-3的依赖文件,最后plugins是插件的意思，"transform-runtime"是一些es6的方法转成es5的方法，装了"transform-vue-jsx"这个插件我们就可以愉快地在vue里面编写jsx了！接下来看下.editorconfig这个文件！看下图！

editorconfig这个文件是编辑器使用的，我们依次来看下编辑器的默认配置：

1. charset = utf-8：文件的编码是utf-8。
2. indent_style = space"：缩进是使用空格来缩进的。
3. indent_size：缩进是两个空格的缩进方式。
4. end_of_line = lf：换行的方式是使用lf这种风格。
5. insert_final_newline = true：在新建文件之后，可以在文件末尾插入一个新行。
6. trim_trailing_whitespace = true：每行的末尾有很多空格可以忽略。

接下来看下.eslintignore文件，我们在做代码检查的时候，可以忽略掉代码检查的文件就放这，这里忽略掉了build，config，dist文件夹下所有的js文件！

下面是.eslintrc.js文件,我们在用vue-cli创建项目安装的时候，其实选择了.eslint来进行代码风格检查，并且还选择了'standard'这种格式,rules可以添加一定自定义的一些规则，例如no-debugger在生产环境下不可以用（报错），在开发环境下可以用（忽略掉检查）,error或者2代表出错，off或者0代表可以忽略检查！（0代表忽略检查，1代表警告，2代表报错）！

我们也来试试呗！随便在main.js写个变量声明，看下图！

接下来我们来编译下，结果可以看到2个报错！

打开http://eslint.org/docs/rules/no-unused-vars看下是什么错误？原来是变量声明了没有在别的地方用这个变量，看下图！

那我们就直接忽略掉"no-unused-vars"这规则，然后在.eslintrc.js的rules可以添加上"no-unused-vars"这项规则，看下图！

因为改了配置，所以需要 npm run start 重新启动项目 ，结果只有一个错误！看下图！

我们再打开http://eslint.org/docs/rules/quotes地址看下什么错误？原来是字符串的引号的问题，那么直接把它忽略掉！

npm run start 重新启动项目再看下，完美运行！

接下来看.gitignore文件，它的作用就是我们在使用git提交项目时候来忽略一些文件和文件夹的，一般会 忽略掉node_modules文件，因为它实在太大了，没有必要提交到项目里面，dist是webpack打包后的文件也是可以忽略的，下面什么 .idea,.vscode等都是和编辑器相关的文件都可以忽略掉！

再来看下.postcssrc.js文件，在webpack2对配置添加了更严格的限制之后，.postcss不再支持从loader传入，因为我们需要在项目的目录创建postcssrc.js文件或者postcss.config.js文件，pluigins是用到的插件，postcss一个最广泛的应用场景就是与autoprefixer结合，为css自动添加广商前缀！我们可以在autoprefixer种添加需要支持的特性(如grid)以及兼容拿些浏览器（browserslist），browserslist写在了package.json里面后面会说到！

看到index.html再熟悉不过了，这里是项目里面一个模版，可以看到除了一个id为app的div，其他什么没有，因为webpack打包之后会自动js css插入到里面

最后来看下package.json这个文件，这个文件是对整个项目的一个描述，看下图！

之前用vue-cli创建项目的时候创建了项目名称，项目描述，作者等，scripts其实是一个指令，有什么用呢？当我们要写很长得命令时候，就可以使用key，value的形式来简化我们的启动命令，npm run key就相当去执行value指令，dependencies是项目生产环境的一些依赖，注意版本前面有个 ^ ，其实意思就是更新这个项目的时候可以加载最新的版本，^ 后面就是最低安装的版本，devDependencies就是我们开发环境的一些依赖，engines是引擎的意思，node必须要大于6的版本，npm要大于3的版本，browserslist就是浏览器的兼容列表，> 1%意思是市场上超过百分之一的人用的浏览器版本，last 2 versions就是主流浏览器最新的两个版本都支持，not ie <= 8意思很明显就是不支持ie8以下的浏览器的！