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的使用
- 在项目根创建一个名为 .editorconfig 的文件。该文件的内容定义该项目的编码规范。
- 安装与编辑器对应的 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 测试相关的文件。