vue-webpack-boilerplate里面各文件解析

vue-webpack-boilerplate是vue-cli脚手架的一个项目模板。github地址

使用

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

文件解析

.gitignore

.gitignore用于告诉Git系统要忽略掉哪些文件。

在使用 Git 进行版本控制的时候，有些文件是无需纳入 Git 管理的，通常都是些自动生成的文件，像日志或者编译过程中创建的文件。我们可以创建一个名为 .gitignore 的文件，列出要忽略的文件来解决这个问题。关于 Pattern 规则，可以查看 git 的相关文档：http://git-scm.com/docs/gitig...

.gitkeep

.gitkeep用于跟踪项目中的空文件。

Git 不跟踪空文件夹 。如果你的项目文件夹里边有任何的空文件夹，Git 都会无视它。但如果你在文件夹里边添加了一个文件，Git 就会开始跟踪这个文件夹。 无论这个文件是什么，内容如何，名字叫啥。因此，若想跟踪项目的空文件夹，那么就可以在这个文件夹中创建一个 .gitkeep 文件。

.eslintignore

.eslintignore文件用于配置忽略语法检查的目录文件。，文件中的每一行都表明哪些路径应该被EsLint忽略检测。

当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。详情见：http://eslint.cn/docs/user-gu...

.eslintrc

.eslintrc文件用于配置ESLint规则。详情见：http://eslint.cn/docs/user-gu...

.postcssrc.js

postcssrc.js文件用来配置postcss。vue-loader 的 postcss 会默认读取这个文件的里的配置项。详情见：https://vue-loader.vuejs.org/...

PostCSS是一个平台，在这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：Autoprefixer 。Autoprefixer 是一个流行的 PostCSS 插件，其作用是为 CSS 中的属性添加浏览器特定的前缀。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

上述代码，autoprefixer会去读取 package.json 下 browserslist的配置文件

• > 1% 兼容全球使用率大于1%的游览器
• last 2 versions 兼容每个游览器的最近两个版本
• not ie <= 8 不兼容ie8及以下

.babelrc

.babelrc文件用来配置babel。

.editorconfig

.editorconfig文件用来定义项目的编码规范。

EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。

EditorConfig的使用

1. 在项目根创建一个名为 .editorconfig 的文件。该文件的内容定义该项目的编码规范。
2. 安装与编辑器对应的 EditorConfig 插件。

其工作原理是：当你在编码时，EditorConfig 插件会去查找当前编辑文件的所在文件夹或其上级文件夹中是否有 .editorconfig 文件。如果有，则编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级高于编辑器自身的设置。

build

build中是一些webpack的相关配置，包括基本配置、开发环境配置、生产环境配置等。

config

config目录主要是针对开发环境，生产环境，测试环境的配置信息。

src/assets与static

src/assets/：此目录下的资源会被webpack处理。

static/：此目录下的文件不会被webpack处理。在webpack打包后，此目录下的文件会默认被直接复制到dist/static/中。这是通过在build.assetsPublicPath 和build.assetsSubDirectory来确定的。

详情见：https://vuejs-templates.githu...

test

用于存放测试文件。

test/unit：包含单元测试相关的文件。关于单元测试如何操作，可见：Vue单元测试---Karma+Mocha+Chai实践
test/e2e：包含 e2e 测试相关的文件。