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.assetsPublicPathbuild.assetsSubDirectory来确定的。

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

test

用于存放测试文件。

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

相关推荐