From 1f7d9259a5d252811c8a7b29bd9bb979f02e6e9a Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Tue, 26 Sep 2017 13:06:17 +0800
Subject: [PATCH 1/3] [zh-cn] sync recent updates from #db54537 to #c39ba70

---
 docs/zh-cn/SUMMARY.md             |  2 ++
 docs/zh-cn/features/hot-reload.md | 14 +++++++++
 docs/zh-cn/features/scoped-css.md | 52 +++++++++++++++++++++++++++++--
 docs/zh-cn/options.md             | 16 ++++++++++
 4 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md
index 12fa66686..acc381fc0 100644
--- a/docs/zh-cn/SUMMARY.md
+++ b/docs/zh-cn/SUMMARY.md
@@ -26,6 +26,8 @@
   - [cssSourceMap](options.md#csssourcemap)
   - [esModule](options.md#esmodule)
   - [preserveWhitespace](options.md#preservewhitespace)
+  - [compilerModules](options.md#compilermodules)
+  - [compilerDirectives](options.md#compilerdirectives)
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)
diff --git a/docs/zh-cn/features/hot-reload.md b/docs/zh-cn/features/hot-reload.md
index 944d23923..225eebf50 100644
--- a/docs/zh-cn/features/hot-reload.md
+++ b/docs/zh-cn/features/hot-reload.md
@@ -4,4 +4,18 @@
 
 ![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
 
+## State Preservation Rules
+<!-- @todo: translation -->
+- When editing the `<template>` of a component, instances of the edited component will re-render in place, preserving all current private state. This is possible because templates are compiled into new render functions that produce no side-effects.
+
+- When editing the `<script>` part of a component, instances of the edited component will be destroyed and re-created in place. (State of the other components in the app are preserved) This is because `<script>` can include lifecycle hooks that may produce side-effects, so a "reload" instead of re-render is required to ensure consistent behavior. This also means you need to be careful about global side effects such as timers inside your components lifecycle hooks. Sometimes you may need to do a full-page reload if your component produces global side-effects.
+
+- `<style>` hot reload operates on its own via `vue-style-loader`, so it doesn't affect application state.
+
+## Usage
+
 当使用脚手架工具 `vue-cli` 时，热重载是开箱即用的。
+
+When manually setting up your project, hot-reload is enabled automatically when you serve your project with `webpack-dev-server --hot`.
+
+Advanced users may want to check out [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api), which is used internally by `vue-loader`.
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
index 945b07aa1..28e590112 100644
--- a/docs/zh-cn/features/scoped-css.md
+++ b/docs/zh-cn/features/scoped-css.md
@@ -28,7 +28,55 @@
 </template>
 ```
 
-#### 注意
+## Tips
+
+### Mixing Local and Global Styles
+
+You can include both scoped and non-scoped styles in the same component:
+
+``` html
+<style>
+/* global styles */
+</style>
+
+<style scoped>
+/* local styles */
+</style>
+```
+
+### Child Component Root Elements
+
+With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the the parent can style the child root element for layout purposes.
+
+### Deep Selectors
+
+If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `>>>` combinator:
+
+``` html
+<style scoped>
+.a >>> .b { /* ... */ }
+</style>
+```
+
+The above will be compiled into:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+
+Some pre-processors, such as SASS, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
+
+### Dynamically Generated Content
+
+DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+
+### Also Keep in Mind
+
+- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](https://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
+
+**Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
+
+<!-- #### 注意
 
 1. 你可以在一个组件中同时使用 scoped 和 non-scoped styles
 
@@ -64,4 +112,4 @@
 
     }
     </style>
-    ```
+    ``` -->
diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md
index 8c31c240f..8f2d22c12 100644
--- a/docs/zh-cn/options.md
+++ b/docs/zh-cn/options.md
@@ -136,6 +136,22 @@ module.exports = {
 
   如果设置为 `false`，模版中 HTML 标签之前的空格将会被忽略。
 
+### compilerModules
+<!-- @todo: translation -->
+- type: `Array<ModuleOptions>`
+- default: `[]`
+
+  Configure `modules` options for `vue-template-compiler`, In about details, see more [`modules` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+
+### compilerDirectives
+
+- type: `{ [tag: string]: Function }`
+- default: `{}` (v13.0.5+)
+
+  > version note: in v12.x, supported in v12.2.3+
+
+  Configure `directives` options for `vue-template-compiler`, In about details, see more [`directives` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+
 ### transformToRequire
 
 - 类型: `{ [tag: string]: string | Array<string> }`

From 2a4421512ecdc7043cd0d840ae15cf2c9bbb8a53 Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Tue, 26 Sep 2017 14:52:21 +0800
Subject: [PATCH 2/3] [zh-cn] synced recent updates (#db54537 to #c39ba70)

---
 docs/zh-cn/features/hot-reload.md | 16 +++----
 docs/zh-cn/features/scoped-css.md | 72 ++++++++-----------------------
 docs/zh-cn/options.md             | 16 +++----
 3 files changed, 33 insertions(+), 71 deletions(-)

diff --git a/docs/zh-cn/features/hot-reload.md b/docs/zh-cn/features/hot-reload.md
index 225eebf50..a4907233a 100644
--- a/docs/zh-cn/features/hot-reload.md
+++ b/docs/zh-cn/features/hot-reload.md
@@ -4,18 +4,18 @@
 
 ![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
 
-## State Preservation Rules
-<!-- @todo: translation -->
-- When editing the `<template>` of a component, instances of the edited component will re-render in place, preserving all current private state. This is possible because templates are compiled into new render functions that produce no side-effects.
+## 状态保留规则
 
-- When editing the `<script>` part of a component, instances of the edited component will be destroyed and re-created in place. (State of the other components in the app are preserved) This is because `<script>` can include lifecycle hooks that may produce side-effects, so a "reload" instead of re-render is required to ensure consistent behavior. This also means you need to be careful about global side effects such as timers inside your components lifecycle hooks. Sometimes you may need to do a full-page reload if your component produces global side-effects.
+- 当编辑一个组件的 `<template>` 时，被编辑的组件实例将会就地被重新渲染，保留当前所有的私有状态。能够做到这一点是因为模板被编译成了无副作用的新的渲染函数。
 
-- `<style>` hot reload operates on its own via `vue-style-loader`, so it doesn't affect application state.
+- 当编辑一个组件的 `<script>` 时，被编辑的组件实例将会就地被销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 `<script>` 可能包含带有副作用的生命周期钩子，所以将“重新加载”替换为重新渲染是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
 
-## Usage
+- `<style>` 会通过 `vue-style-loader` 自行热重载，所以它不会影响应用的状态。
+
+## 用法
 
 当使用脚手架工具 `vue-cli` 时，热重载是开箱即用的。
 
-When manually setting up your project, hot-reload is enabled automatically when you serve your project with `webpack-dev-server --hot`.
+当手动设置你的工程时，热重载会在你启动 `webpack-dev-server --hot` 服务时自动开启。
 
-Advanced users may want to check out [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api), which is used internally by `vue-loader`.
+高阶用户可能希望移步 `vue-loader` 内部使用的 [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api) 继续查阅。
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
index 28e590112..09f31e73a 100644
--- a/docs/zh-cn/features/scoped-css.md
+++ b/docs/zh-cn/features/scoped-css.md
@@ -1,4 +1,4 @@
-# CSS 作用域
+# 有作用域的 CSS
 
 当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfills。它通过使用 PostCSS 来实现以下转换：
 
@@ -28,29 +28,29 @@
 </template>
 ```
 
-## Tips
+## 注意
 
-### Mixing Local and Global Styles
+### 混用本地和全局样式
 
-You can include both scoped and non-scoped styles in the same component:
+你可以在一个组件中同时使用有作用域和无作用域的样式：
 
 ``` html
 <style>
-/* global styles */
+/* 全局样式 */
 </style>
 
 <style scoped>
-/* local styles */
+/* 本地样式 */
 </style>
 ```
 
-### Child Component Root Elements
+### 子组件的根元素
 
-With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the the parent can style the child root element for layout purposes.
+使用 `scoped` 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
 
-### Deep Selectors
+### 深度作用选择器
 
-If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `>>>` combinator:
+如果你希望 `scoped` 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 `>>>` 操作符：
 
 ``` html
 <style scoped>
@@ -58,58 +58,20 @@ If you want a selector in `scoped` styles to be "deep", i.e. affecting child com
 </style>
 ```
 
-The above will be compiled into:
+上述代码将会编译成：
 
 ``` css
 .a[data-v-f3f3eg9] .b { /* ... */ }
 ```
 
-Some pre-processors, such as SASS, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
+有些像 SASS 之类的预处理器无法正确解析 `>>>`。这种情况下你可以使用 `/deep/` 操作符取而代之——这是一个 `>>>` 的别名，同样可以正常工作。
 
-### Dynamically Generated Content
+### 动态生成的内容
 
-DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+通过 `v-html` 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。
 
-### Also Keep in Mind
+### 还有一些要留意
 
-- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](https://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
+- **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 `.example { color: red }`，性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
 
-**Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
-
-<!-- #### 注意
-
-1. 你可以在一个组件中同时使用 scoped 和 non-scoped styles
-
-  ``` html
-  <style>
-  /* global styles */
-  </style>
-
-  <style scoped>
-  /* local styles */
-  </style>
-  ```
-
-2. 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响。
-
-3. Partials 不受作用域样式影响。
-
-4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍 (即当与属性选择器组合时)。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)测试它们的不同。
-
-5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。
-
-6. 如果 `scoped` 样式中需要嵌套的选择器，你得在 CSS 中使用 `>>>` 操作符，且在 `scss` 中使用 `/deep/`：
-
-    ``` html
-    <style scoped>
-    .a >>> .b {
-
-    }
-    </style>
-
-    <style lang="scss" scoped>
-    .a /deep/ .b {
-
-    }
-    </style>
-    ``` -->
+- **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说，如果匹配 `.a` 的元素包含一个递归子组件，则所有的子组件中的 `.b` 都将被这个规则匹配。
diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md
index 8f2d22c12..04fbd473d 100644
--- a/docs/zh-cn/options.md
+++ b/docs/zh-cn/options.md
@@ -137,20 +137,20 @@ module.exports = {
   如果设置为 `false`，模版中 HTML 标签之前的空格将会被忽略。
 
 ### compilerModules
-<!-- @todo: translation -->
-- type: `Array<ModuleOptions>`
-- default: `[]`
 
-  Configure `modules` options for `vue-template-compiler`, In about details, see more [`modules` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+- 类型：`Array<ModuleOptions>`
+- 默认值：`[]`
+
+  为 `vue-template-compiler` 配置 `modules` 选项。相关细节请查阅 `vue-template-compiler` 的 [`modules` 选项](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options)。
 
 ### compilerDirectives
 
-- type: `{ [tag: string]: Function }`
-- default: `{}` (v13.0.5+)
+- 类型：`{ [tag: string]: Function }`
+- 默认值：`{}` (v13.0.5+)
 
-  > version note: in v12.x, supported in v12.2.3+
+  > 版本说明：在 v12.x 中，从 v12.2.3+ 开始支持
 
-  Configure `directives` options for `vue-template-compiler`, In about details, see more [`directives` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+  为 `vue-template-compiler` 配置 `directives` 选项。相关细节请查阅 `vue-template-compiler` 的 [`modules` 选项](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options)。
 
 ### transformToRequire
 

From 3e1f16ba07c2f4e923bf143d04d9b053221642e2 Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 29 Sep 2017 22:17:28 +0800
Subject: [PATCH 3/3] [zh-cn] fixed some details

---
 docs/zh-cn/features/hot-reload.md | 4 ++--
 docs/zh-cn/features/scoped-css.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/zh-cn/features/hot-reload.md b/docs/zh-cn/features/hot-reload.md
index a4907233a..1d5b8280f 100644
--- a/docs/zh-cn/features/hot-reload.md
+++ b/docs/zh-cn/features/hot-reload.md
@@ -6,9 +6,9 @@
 
 ## 状态保留规则
 
-- 当编辑一个组件的 `<template>` 时，被编辑的组件实例将会就地被重新渲染，保留当前所有的私有状态。能够做到这一点是因为模板被编译成了无副作用的新的渲染函数。
+- 当编辑一个组件的 `<template>` 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
 
-- 当编辑一个组件的 `<script>` 时，被编辑的组件实例将会就地被销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 `<script>` 可能包含带有副作用的生命周期钩子，所以将“重新加载”替换为重新渲染是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
+- 当编辑一个组件的 `<script>` 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 `<script>` 可能包含带有副作用的生命周期钩子，所以将“重新加载”替换为重新渲染是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
 
 - `<style>` 会通过 `vue-style-loader` 自行热重载，所以它不会影响应用的状态。
 
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
index 09f31e73a..5ee171555 100644
--- a/docs/zh-cn/features/scoped-css.md
+++ b/docs/zh-cn/features/scoped-css.md
@@ -1,6 +1,6 @@
 # 有作用域的 CSS
 
-当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfills。它通过使用 PostCSS 来实现以下转换：
+当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：
 
 ``` html
 <style scoped>
@@ -72,6 +72,6 @@
 
 ### 还有一些要留意
 
-- **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 `.example { color: red }`，性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
+- **CSS 作用域不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式，当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 `.example { color: red }`，性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
 
 - **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说，如果匹配 `.a` 的元素包含一个递归子组件，则所有的子组件中的 `.b` 都将被这个规则匹配。