The docs Chinese translation

docs/zh-cn/README.md

@@ -0,0 +1,38 @@
+# 介绍
+
+### `vue-loader` 是什么？
+
+`vue-loader` 是一个 Webpack 的 loader，可以将用下面这个格式编写的 Vue 组件转换为 JavaScript 模块：
+
+![screenshot](http://blog.evanyou.me/images/vue-component.png)
+
+这里有一些 `vue-loader` 提供的很酷的特性：
+
+- ES2015 默认支持;
+- 允许对 Vue 组件的组成部分使用其它 Webpack loaders，比如对 `<style>` 使用 SASS 和对 `<template>` 使用 Jade；
+- `.vue` 文件中允许自定义节点，然后使用自定义的 loader 处理他们；
+- 把 `<style>` 和 `<template>` 中的静态资源当作模块来对待，并使用 Webpack loaders 进行处理；
+- 对每个组件模拟出 CSS 作用域；
+- 支持开发期组件的热重载。
+
+简而言之，编写 Vue.js 应用程序时，组合使用 Webpack 和 `vue-loader` 能带来一个现代，灵活并且非常强大的前端工作流程。
+
+### Webpack 是什么?
+
+如果你已经熟悉了 Webpack，随时可以跳过下面的说明。如果你没有使用过 Webpack,下面是一个快速介绍：
+
+[Webpack](http://webpack.github.io/) 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
+
+![webpack](http://webpack.github.io/assets/what-is-webpack.png)
+
+一个基本的例子，想像我们有一些 CommonJS 模块，它不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过`<script>` 标签加载。Webpack 可以遵循 `require()` 调用的依赖关系，为我们完成这些工作。
+
+但是 Webpack 可以做的不止这些。使用 "loaders"，我们可以配置 Webpack 以任何方式去转换所有类型的文件。一些例子包括：
+
+- 转换 ES2015,CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块；
+- 可以选择在编译之前检验你的源代码；
+- 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中；
+- 将 SASS 文件转换为纯 CSS，then convert it into a JavaScript snippet that insert the resulting CSS as a `<style>` tag;
+- 处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名。
+
+当你理解 Webpack 原理后会感觉它是如此强大，它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦，但是使用本指南， Vue.js 和 `vue-loader`使用时的常见问题，应该可以帮助你找到解决方案。

docs/zh-cn/SUMMARY.md

@@ -0,0 +1,21 @@
+- 开始
+  - [Vue 组件细则](start/spec.md)
+  - [创建项目](start/setup.md)
+- 特性
+  - [ES2015](features/es2015.md)
+  - [CSS 作用域](features/scoped-css.md)
+  - [CSS 模块](features/css-modules.md)
+  - [PostCSS](features/postcss.md)
+  - [热重载](features/hot-reload.md)
+- 配置
+  - [预处理器](configurations/pre-processors.md)
+  - [处理资源路径](configurations/asset-url.md)
+  - [进阶配置](configurations/advanced.md)
+  - [提取 CSS 文件](configurations/extract-css.md)
+  - [自定义块](configurations/custom-blocks.md)
+- 工作流程
+  - [生产环境构建](workflow/production.md)
+  - [代码检验](workflow/linting.md)
+  - [测试](workflow/testing.md)
+  - [使用 Mocks 测试](workflow/testing-with-mocks.md)
+- [选项参考](options.md)

docs/zh-cn/configurations/advanced.md

@@ -0,0 +1,78 @@
+# Loader 进阶配置
+
+有些时候你想要这样：
+
+1. 对语言应用自定义 loader string，而不是让 `vue-loader` 去推断；
+
+2. 覆盖默认语言的内置配置。
+
+3. 默认语言预处理或者后处理配置。
+
+为了实现这些，详细说明 `vue-loader` 的 `loaders` 选项：
+
+> 注意 `preLoaders` 和 `postLoaders` 只在版本 >=10.3.0 支持
+
+### Webpack 2.x
+
+``` js
+module.exports = {
+  // other options...
+  module: {
+    // module.rules is the same as module.loaders in 1.x
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          // `loaders` 覆盖默认 loaders.
+          // 以下配置会导致所有的 <script> 标签 "lang" 属性失效。
+          // attribute to be loaded with coffee-loader
+          loaders: {
+            js: 'coffee-loader'
+          },
+
+          // `preLoaders` 会在默认 loaders 之前加载.
+          // 你可以用来预处理语言块 - 一个例子是用来处理构建时的 i18n
+          preLoaders: {
+            js: '/path/to/custom/loader'
+          },
+
+          // `postLoaders` 会在默认 loaders 之后加载.
+          //
+          // - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
+          //
+          // - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 postcss 插件将会是更好的选择。
+          postLoaders: {
+            html: 'babel-loader'
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+### Webpack 1.x
+
+``` js
+// webpack.config.js
+module.exports = {
+  // other options...
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      }
+    ]
+  },
+  // vue-loader configurations
+  vue: {
+    loaders: {
+      // same configuration rules as above
+    }
+  }
+}
+```
+
+进阶配置更实际的用法是 [提取组件中的 CSS 到单个文件](./extract-css.md)。

docs/zh-cn/configurations/asset-url.md

@@ -0,0 +1,23 @@
+# 处理资源路径
+
+默认情况下，`vue-loader` 使用 [css-loader](https://github.com/webpack/css-loader) 和 Vue 模版编译器自动处理你的样式和模版文件。在处理过程中，所有的资源路径例如 `<img src="...">`, `background: url(...)` 和 `@import` **会作为模块依赖**。
+
+例如，`url(./image.png)` 会被转换为 `require('./image.png')`,
+
+``` html
+<img src="../image.png">
+```
+
+将会编译为：
+
+``` js
+createElement('img', { attrs: { src: require('../image.png') }})
+```
+
+因为 `.png` 不是一个 JavaScript 文件，你需要配置 Webpack 使用 [file-loader](https://github.com/webpack/file-loader) 或者 [url-loader](https://github.com/webpack/url-loader) 去处理它们。脚手器工具 `vue-cli` 已经为你配置好了。
+
+使用它们的好处：
+
+1. `file-loader` 允许你指定资源文件的位置，允许使用 hashes 命名以获得长时间的缓存。此外，这意味着 **你可以就近管理你的图片文件，可以使用相对路径而不用担心布署**。使用正确的配置，Webpack 将会在输出中自动重写为正常的文件路径。
+
+2. `url-loader` 允许你设置转换为内联 base64 的文件最小值，这会减少小文件的 HTTP 请求。如果文件大于设置值，会自动的交给 `file-loader` 处理。

docs/zh-cn/configurations/custom-blocks.md

@@ -0,0 +1,67 @@
+# 自定义块
+
+> 在大于 10.2.0 中支持
+
+在 `.vue` 文件中，你可以自定义语言块。自定义块将会被 `vue-loader` 选项 `loaders` 中指定的 loaders 处理，然后被组件模块依赖。配置类似 [Loader 进阶配置](../configurations/advanced.md)，除了匹配使用的是标签名称，而不是 `lang` 属性。
+
+如果 loader 匹配到自定义块，它会被处理；其它情况会被忽略。
+
+## 例子
+
+这个例子是提取自定义块 `<docs>` 的内容到单个 docs 文件中：
+
+#### component.vue
+
+``` html
+<docs>
+## This is an Example component.
+</docs>
+
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            // 提取 <docs> 中的内容为原始文本
+            'docs': ExtractTextPlugin.extract('raw-loader'),
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    // 输出 docs 到当个文件中
+    new ExtractTextPlugin('docs.md')
+  ]
+}
+```

docs/zh-cn/configurations/extract-css.md

@@ -0,0 +1,70 @@
+# 提取 CSS 到单个文件
+
+提取所有 Vue 组件中的 CSS 到单个文件的例子：
+
+### Webpack 2.x
+
+``` bash
+npm install [email protected] --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // other options...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              use: 'css-loader',
+              fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
+            })
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```
+
+### Webpack 1.x
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // other options...
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+    ]
+  },
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract("css"),
+      // you can also include <style lang="less"> or other langauges
+      less: ExtractTextPlugin.extract("css!less")
+    }
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```

docs/zh-cn/configurations/pre-processors.md

@@ -0,0 +1,81 @@
+# 使用预处理器
+
+在 Webpack 中，所有的预处理器需要匹配对应的 loader。 `vue-loader` 允许你使用其它 Webpack loaders 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loaders。
+
+### CSS
+
+例如，使用 SASS 编译我们的 `<style>` 语言块：
+
+``` bash
+npm install sass-loader node-sass --save-dev
+```
+
+``` html
+<style lang="sass">
+  /* write sass here */
+</style>
+```
+
+在内部，`<style>` 标签中的内容将会先由 `sass-loader` 进行处理，然后再传递进行下一步处理。
+
+#### sass-loader 警告
+
+与名称相反，[*sass*-loader](https://github.com/jtangelder/sass-loader) 默认解析 *SCSS* 语法。如果你想要使用 *SASS* 语法，你需要配置 `vue-loader` 的选项：
+
+```javascript
+{
+  test: /\.vue$/,
+  loader: 'vue-loader',
+  options: {
+    loaders: {
+      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
+      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
+    }
+  }
+}
+```
+
+如要获得更多关于 `vue-loader` 的配置信息，请查看 [Loader 进阶配置](./advanced.md) 章节。
+
+### JavaScript
+
+Vue 组件中的所有 JavaScript 默认使用 `babel-loader` 处理。你也可以改变处理方式：
+
+``` bash
+npm install coffee-loader --save-dev
+```
+
+``` html
+<script lang="coffee">
+  # Write coffeescript!
+</script>
+```
+
+### 模版
+
+模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 `pug-loader`）会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 `pug` 替代 `pug-loader`:
+
+``` bash
+npm install pug --save-dev
+```
+
+``` html
+<template lang="pug">
+div
+  h1 Hello world!
+</template>
+```
+
+> **重要:** 如果你使用 `vue-loader@<8.2.0`， 你还需要安装 `template-html-loader`。
+
+### 行内 Loader Requests
+
+你可以在 `lang` 属性中使用 [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) ：
+
+``` html
+<style lang="sass?outputStyle=expanded">
+  /* use sass here with expanded output */
+</style>
+```
+
+但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify and [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。**