From 2ef363598c092b9a22858e2ffd80ce406891d76a Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Sun, 4 Feb 2018 00:59:34 +0800
Subject: [PATCH 1/2] [docs][zh-cn] synced recent updates from #436ac94 to
 #46558ce

---
 docs/zh-cn/SUMMARY.md                      |  3 +-
 docs/zh-cn/configurations/advanced.md      | 25 ------
 docs/zh-cn/configurations/custom-blocks.md |  1 -
 docs/zh-cn/configurations/extract-css.md   | 36 --------
 docs/zh-cn/features/css-modules.md         | 11 ---
 docs/zh-cn/features/postcss.md             | 15 +---
 docs/zh-cn/options.md                      | 59 ++++++-------
 docs/zh-cn/start/setup.md                  | 11 ++-
 docs/zh-cn/workflow/linting.md             | 66 +++------------
 docs/zh-cn/workflow/production.md          | 11 +--
 docs/zh-cn/workflow/testing-with-mocks.md  | 70 ---------------
 docs/zh-cn/workflow/testing.md             | 99 +---------------------
 12 files changed, 45 insertions(+), 362 deletions(-)
 delete mode 100644 docs/zh-cn/workflow/testing-with-mocks.md

diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md
index d8e58fde5..e1e35f348 100644
--- a/docs/zh-cn/SUMMARY.md
+++ b/docs/zh-cn/SUMMARY.md
@@ -18,7 +18,6 @@
   - [生产环境构建](workflow/production.md)
   - [代码检验](workflow/linting.md)
   - [测试](workflow/testing.md)
-  - [使用 Mock 测试](workflow/testing-with-mocks.md)
 - [选项参考](options.md)
   - [loaders](options.md#loaders)
   - [preLoaders](options.md#preloaders)
@@ -33,4 +32,4 @@
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)
-  - [optimizeSSR](options.md#optimizessr)
\ No newline at end of file
+  - [optimizeSSR](options.md#optimizessr)
diff --git a/docs/zh-cn/configurations/advanced.md b/docs/zh-cn/configurations/advanced.md
index 04e5c1ab0..592836e6c 100644
--- a/docs/zh-cn/configurations/advanced.md
+++ b/docs/zh-cn/configurations/advanced.md
@@ -12,8 +12,6 @@
 
 > 注意 `preLoaders` 和 `postLoaders` 只在 10.3.0+ 版本支持
 
-### webpack 2.x
-
 ``` js
 module.exports = {
   // other options...
@@ -54,27 +52,4 @@ module.exports = {
 }
 ```
 
-### 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)。
diff --git a/docs/zh-cn/configurations/custom-blocks.md b/docs/zh-cn/configurations/custom-blocks.md
index 2273f3367..5b1cbecbe 100644
--- a/docs/zh-cn/configurations/custom-blocks.md
+++ b/docs/zh-cn/configurations/custom-blocks.md
@@ -42,7 +42,6 @@ comp-a h2 {
 #### webpack.config.js
 
 ``` js
-// webpack 2.x
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {
diff --git a/docs/zh-cn/configurations/extract-css.md b/docs/zh-cn/configurations/extract-css.md
index b0d0aa38d..b0f176771 100644
--- a/docs/zh-cn/configurations/extract-css.md
+++ b/docs/zh-cn/configurations/extract-css.md
@@ -39,9 +39,6 @@ module.exports = {
 
 将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例：
 
-### webpack 2.x
-
-
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -69,36 +66,3 @@ module.exports = {
   ]
 }
 ```
-
-### 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"),
-      // 你还可以引入 <style lang="less"> 或其它语言
-      less: ExtractTextPlugin.extract("css!less")
-    }
-  },
-  plugins: [
-    new ExtractTextPlugin("style.css")
-  ]
-}
-```
diff --git a/docs/zh-cn/features/css-modules.md b/docs/zh-cn/features/css-modules.md
index 6f81fbf6b..d925004ae 100644
--- a/docs/zh-cn/features/css-modules.md
+++ b/docs/zh-cn/features/css-modules.md
@@ -89,17 +89,6 @@ CSS Modules 处理是通过 [css-loader](https://github.com/webpack/css-loader)
 你可以使用 `vue-loader` 的 `cssModules` 选项去为 `css-loader` 添加 query 配置：
 
 ``` js
-// webpack 1
-vue: {
-  cssModules: {
-    // overwrite local ident name
-    localIdentName: '[path][name]---[local]---[hash:base64:5]',
-    // enable camelCase
-    camelCase: true
-  }
-}
-
-// webpack 2
 module: {
   rules: [
     {
diff --git a/docs/zh-cn/features/postcss.md b/docs/zh-cn/features/postcss.md
index 4f1a8c3e3..5051eea3d 100644
--- a/docs/zh-cn/features/postcss.md
+++ b/docs/zh-cn/features/postcss.md
@@ -27,20 +27,7 @@
 
 或者，你可以使用 `vue-loader` 的 `postcss` 选项来为 `.vue` 文件指定配置。
 
-webpack 1.x 例子：
-
-``` js
-// webpack.config.js
-module.exports = {
-  // 其它配置……
-  vue: {
-    // 使用自定义 PostCSS 插件
-    postcss: [require('postcss-cssnext')()]
-  }
-}
-```
-
-webpack 2.x 例子：
+示例：
 
 ``` js
 // webpack.config.js
diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md
index 63195a077..501550727 100644
--- a/docs/zh-cn/options.md
+++ b/docs/zh-cn/options.md
@@ -1,8 +1,6 @@
 # 选项参考
 
-## webpack 1 和 2 之间的使用差异
-
-webpack 2：配置直接放到 loader rule 中。
+## 选项放在哪里
 
 ``` js
 module.exports = {
@@ -21,20 +19,9 @@ module.exports = {
 }
 ```
 
-webpack 1.x：在 webpack 配置中添加根节点 `vue` 块。
-
-``` js
-module.exports = {
-  // ...
-  vue: {
-    // `vue-loader` options
-  }
-}
-```
-
 ### loaders
 
-- 类型：`{ [lang: string]: string }`
+- 类型：`{ [lang: string]: string | Object | Array }`
 
   指定 webpack loader 对象覆盖用于 `*.vue` 文件内的语言块的默认 loader。如果指定，该键对应于语言块的 `lang` 属性。每种类型的默认 `lang` 是：
 
@@ -45,7 +32,6 @@ module.exports = {
   例如，使用 `babel-loader` 和 `eslint-loader` 处理所有的 `<script>` 块：
 
   ``` js
-  // webpack 2.x config
   module: {
     rules: [
       {
@@ -61,17 +47,36 @@ module.exports = {
   }
   ```
 
+  你也可以使用对象或数组的语法 (注意这些选项必须是可序列化的)：
+
+  ``` js
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: [
+              { loader: 'cache-loader' },
+              { loader: 'babel-loader', options: { presets: ['env'] } }
+            ]
+          }
+        }
+      }
+    ]
+  }
+  ```
+
 ### preLoaders
 
 - 类型：`{ [lang: string]: string }`
-- 仅在 10.3.0+ 版本中支持
 
   配置格式和 `loaders` 相同，但是 `preLoaders` 会在默认 loaders 之前处理。你可以用来预处理语言块 - 一个常见用例是用来处理构建时的 i18n。
 
 ### postLoaders
 
 - 类型：`{ [lang: string]: string }`
-- 仅在 10.3.0+ 版本中支持
 
   配置格式和 `loaders` 相同，但是 `postLoaders` 会在默认 loaders 之后处理。你可以用来后处理语言块。注意这会有些复杂：
 
@@ -81,11 +86,10 @@ module.exports = {
 
 ### postcss
 
-> 注意：在 11.0.0+ 版本中，推荐使用 PostCSS 配置文件代替。[用法和 `postcss-loader` 相同](https://github.com/postcss/postcss-loader#usage)。
+> 注意：这里推荐使用 PostCSS 配置文件代替，这样你的 `.vue` 文件中的样式和普通的 CSS 样式可以共享相同的配置。[用法和 `postcss-loader` 相同](https://github.com/postcss/postcss-loader#usage)。
 
 - 类型：`Array` or `Function` or `Object`
 
-
   指定要应用于 `.vue` 文件中 CSS 的自定义 PostCSS 插件。如果使用函数，函数将使用相同的 loader 上下文调用，并返回一个插件数组。
 
   ``` js
@@ -207,21 +211,6 @@ module.exports = {
   配置例子：
 
   ``` js
-  // webpack 1
-  vue: {
-    buble: {
-      // 启用对象扩展运算符
-      // 注意：你需要自己提供 Object.assign polyfill！
-      objectAssign: 'Object.assign',
-
-      // turn off the `with` removal
-      transforms: {
-        stripWith: false
-      }
-    }
-  }
-
-  // webpack 2
   module: {
     rules: [
       {
diff --git a/docs/zh-cn/start/setup.md b/docs/zh-cn/start/setup.md
index 97474524f..bf8582798 100644
--- a/docs/zh-cn/start/setup.md
+++ b/docs/zh-cn/start/setup.md
@@ -1,13 +1,12 @@
 # 创建项目
 
-### 使用 `vue-cli`
+### 使用 `@vue/cli`
 
-推荐用脚手架工具 `vue-cli` 来创建一个使用 `vue-loader` 的项目：
+推荐用脚手架工具 `@vue/cli` 来创建一个使用 `vue-loader` 的项目：
 
 ``` bash
-npm install -g vue-cli
-vue init webpack-simple hello-vue
+npm install -g @vue/cli
+vue create hello-vue
 cd hello-vue
-npm install
-npm run dev # ready to go!
+npm run serve # ready to go!
 ```
diff --git a/docs/zh-cn/workflow/linting.md b/docs/zh-cn/workflow/linting.md
index 062a0861c..9eaa029f2 100644
--- a/docs/zh-cn/workflow/linting.md
+++ b/docs/zh-cn/workflow/linting.md
@@ -2,13 +2,16 @@
 
 你可能有疑问，在 `.vue` 文件中你怎么检验你的代码，因为它不是 JavaScript。我们假设你使用 [ESLint](https://eslint.org/) (如果你没有使用话，你应该去使用！)。
 
-你还需要 [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html) 来支持提取并检验你的 `.vue` 文件中的 JavaScript。
+你还需要官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)，它同时支持检验你 `.vue` 文件中的模板和脚本。
+
+请确保在你的 ESLint 配置中使用了该插件自身的配置：
 
-确保把下面的配置加入到你的 ESLint 配置中：
 ``` json
-"plugins": [
-  "html"
-]
+{
+  "extends": [
+    "plugin:vue/essential"
+  ]
+}
 ```
 
 在命令行这样使用：
@@ -23,50 +26,7 @@ eslint --ext js,vue MyComponent.vue
 npm install eslint eslint-loader --save-dev
 ```
 
-``` js
-// webpack.config.js
-module.exports = {
-  // ... other options
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue!eslint'
-      }
-    ]
-  }
-}
-```
-
-注意 webpack loader 处理顺序是 **从右到左**。确保在 `vue` 之前应用 `eslint`，这样才能检验编译前的代码。
-
-我们需要考虑使用的 NPM 包中的第三方 `.vue` 组件，实际使用中我们希望使用 `vue-loader` 去处理第三方组件，但是不想检验它们。我们需要把 lint 配置到 webpack 的 [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order) 中：
-
-``` js
-// webpack.config.js
-module.exports = {
-  // ... other options
-  module: {
-    // only lint local *.vue files
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        exclude: /node_modules/
-      }
-    ],
-    // but use vue-loader for all *.vue files
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      }
-    ]
-  }
-}
-```
-
-For webpack 2.x：
+请确保它应用在了 pre-loader 上：
 
 ``` js
 // webpack.config.js
@@ -74,17 +34,11 @@ module.exports = {
   // ... other options
   module: {
     rules: [
-      // only lint local *.vue files
       {
         enforce: 'pre',
-        test: /\.vue$/,
+        test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /node_modules/
-      },
-      // but use vue-loader for all *.vue files
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
       }
     ]
   }
diff --git a/docs/zh-cn/workflow/production.md b/docs/zh-cn/workflow/production.md
index 9c26b85cd..3cc3c9834 100644
--- a/docs/zh-cn/workflow/production.md
+++ b/docs/zh-cn/workflow/production.md
@@ -18,19 +18,12 @@ module.exports = {
         NODE_ENV: '"production"'
       }
     }),
-    // minify with dead-code elimination
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    // optimize module ids by occurrence count
-    new webpack.optimize.OccurrenceOrderPlugin()
+    new webpack.optimize.UglifyJsPlugin()
   ]
 }
 ```
 
-显然，我们不想在开发过程中使用这些配置，所以有几种方法可以解决这个问题：
+我们不想在开发过程中使用这些配置，所以有几种方法可以解决这个问题：
 
 1. 使用环境变量动态构建；
 
diff --git a/docs/zh-cn/workflow/testing-with-mocks.md b/docs/zh-cn/workflow/testing-with-mocks.md
deleted file mode 100644
index 4224f5064..000000000
--- a/docs/zh-cn/workflow/testing-with-mocks.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# 使用 Mock 测试
-
-在真实世界的应用中，我们的组件很有可能具有外部依赖。在为组件编写单元测试时，理想的状态是我们可以模拟这些外部依赖关系，这样我们的测试只依赖被测组件的行为。
-
-`vue-loader` 提供了一个可以使用 [inject-loader](https://github.com/plasticine/inject-loader) 将任意依赖项注入到 `*.vue` 组件的特性。大体思路是：我们使用 `inject-loader` 为该模块创建一个 “模块工厂” 功能，而不是直接导入组件模块。当使用 mock 对象调用此函数时，它会返回模块的实例，并注入到 mock 中。
-
-> 注意：你必须在注入模式下禁用 `esModule` 选项，否则会报错。
-
-假设我们有一个这样的组件：
-
-``` html
-<!-- example.vue -->
-<template>
-  <div class="msg">{{ msg }}</div>
-</template>
-
-<script>
-// this dependency needs to be mocked
-const SomeService = require('../service')
-
-module.exports = {
-  data () {
-    return {
-      msg: SomeService.msg
-    }
-  }
-}
-</script>
-```
-
-以下是使用 mock 导入的方法：
-
-``` bash
-npm install inject-loader --save-dev
-```
-
-``` js
-// example.spec.js
-const ExampleInjector = require('!!vue?inject!./example.vue')
-```
-
-请注意那些超长的依赖字符串——也就是我们使用的一些内联 [webpack loader 依赖](https://webpack.github.io/docs/loaders.html)。简要解释一下：
-
-- 以 `!!` 打头意味着 “禁用全局配置中的所有 loader”；
-- `vue?inject!`意思是 “使用 `vue` loader，并传入 `?inject` 查询”。这告诉 `vue-loader` 在依赖注入模式下编译组件。
-
-返回的 `ExampleInjector` 是一个工厂函数，可以调用它来创建 `example.vue` 模块的实例：
-
-``` js
-const ExampleWithMocks = ExampleInjector({
-  // mock it
-  '../service': {
-    msg: 'Hello from a mocked service!'
-  }
-})
-```
-
-最后，我们可以像往常一样测试组件：
-
-``` js
-it('should render', () => {
-  const vm = new Vue({
-    template: '<div><test></test></div>',
-    components: {
-      'test': ExampleWithMocks
-    }
-  }).$mount()
-  expect(vm.$el.querySelector('.msg').textContent).to.equal('Hello from a mocked service!')
-})
-```
diff --git a/docs/zh-cn/workflow/testing.md b/docs/zh-cn/workflow/testing.md
index bb6c72ff5..8ccd41711 100644
--- a/docs/zh-cn/workflow/testing.md
+++ b/docs/zh-cn/workflow/testing.md
@@ -1,100 +1,5 @@
 # 测试
 
-> [webpack vue-cli 模板](https://github.com/vuejs-templates/webpack)为你提供预配置的单元测试和 e2e 测试设置。
+- [@vue/cli](https://github.com/vuejs/vue-cli) 为你提供预配置的单元测试和 e2e 测试设置。
 
-当测试 `*.vue` 文件时，我们不能使用基于 CommonJS 的简单测试运行器，因为它不知道如何处理 `*.vue` 文件。而是应该使用 webpack + vue-loader 打包我们的测试文件。推荐的设置是使用 [Karma](https://karma-runner.github.io/0.13/index.html) 和 [karma-webpack](https://github.com/webpack/karma-webpack)。
-
-Karma 是一个启动浏览器并为你运行测试的测试运行器。你可以选择要测试的浏览器以及你要使用的测试框架 (例如 Mocha 或 Jasmine)。以下是一个在 [PhantomJS](http://phantomjs.org/) 中使用 [Jasmine](https://jasmine.github.io/edge/introduction.html) 测试框架运行测试的 Karma 配置示例：
-
-``` bash
-npm install\
-  karma karma-webpack\
-  karma-jasmine jasmine-core\
-  karma-phantomjs-launcher phantomjs-prebuilt\
-  --save-dev
-```
-
-``` js
-// 我们只需要使用完全相同的 webpack 配置即可
-// 但是，请记得删除原来的 entry，因为我们在测试期间不需要它
-var webpackConfig = require('./webpack.config.js')
-delete webpackConfig.entry
-
-// karma.conf.js
-module.exports = function (config) {
-  config.set({
-    browsers: ['PhantomJS'],
-    frameworks: ['jasmine'],
-    // 这是所有测试的入口文件。
-    files: ['test/index.js'],
-    // 把入口文件传给 webpack 以进行打包。
-    preprocessors: {
-      'test/index.js': ['webpack']
-    },
-    // 使用 webpack 配置
-    webpack: webpackConfig,
-    // 避免被无用文本刷屏
-    webpackMiddleware: {
-      noInfo: true
-    },
-    singleRun: true
-  })
-}
-```
-
-`test/index.js` 文件如下：
-
-``` js
-// test/index.js
-// 通过该特殊 webpack 特性引入所有测试文件
-// https://webpack.github.io/docs/context.html#require-context
-var testsContext = require.context('.', true, /\.spec$/)
-testsContext.keys().forEach(testsContext)
-```
-
-此入口文件只需要在同一文件夹中的 `.spec.js` 结尾引入其他所有文件。现在我们可以写一些测试：
-
-``` js
-// test/component-a.spec.js
-var Vue = require('vue')
-var ComponentA = require('../../src/components/a.vue')
-
-describe('a.vue', function () {
-
-  // JavaScript 选项断言
-  it('should have correct message', function () {
-    expect(ComponentA.data().msg).toBe('Hello from Component A!')
-  })
-
-  // 组件实际渲染的渲染结果断言
-  it('should render correct message', function () {
-    var vm = new Vue({
-      template: '<div><test></test></div>',
-      components: {
-        'test': ComponentA
-      }
-    }).$mount()
-    expect(vm.$el.querySelector('h2.red').textContent).toBe('Hello from Component A!')
-  })
-})
-```
-
-添加以下 NPM 脚本以运行测试：
-
-``` js
-// package.json
-...
-"scripts": {
-  ...
-  "test": "karma start karma.conf.js"
-}
-...
-```
-
-最后运行：
-
-``` bash
-npm test
-```
-
-此外，[webpack vue-cli 模板](https://github.com/vuejs-templates/webpack)包含一个完整的测试用例。
+- 如果你对为 `*.vue` 文件手动设置单元测试感兴趣，请移步 [`@vue/test-utils` 对文档](https://vue-test-utils.vuejs.org/zh-cn/)。

From 98c63757118ac9fd4257e86bba6040c7a2a26d41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= <zhaojinjiang@me.com>
Date: Mon, 26 Feb 2018 20:10:32 +0800
Subject: [PATCH 2/2] Update linting.md

---
 docs/zh-cn/workflow/linting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/zh-cn/workflow/linting.md b/docs/zh-cn/workflow/linting.md
index 9eaa029f2..bd608e30f 100644
--- a/docs/zh-cn/workflow/linting.md
+++ b/docs/zh-cn/workflow/linting.md
@@ -2,7 +2,7 @@
 
 你可能有疑问，在 `.vue` 文件中你怎么检验你的代码，因为它不是 JavaScript。我们假设你使用 [ESLint](https://eslint.org/) (如果你没有使用话，你应该去使用！)。
 
-你还需要官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)，它同时支持检验你 `.vue` 文件中的模板和脚本。
+你还需要官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)，它支持同时检查你 `.vue` 文件中的模板和脚本。
 
 请确保在你的 ESLint 配置中使用了该插件自身的配置：