[docs][zh-cn] synced recent updates (#1150)

* [docs][zh-cn] synced recent updates from #436ac94 to #46558ce

* Update linting.md

Author: Jinjiang

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)
+  - [optimizeSSR](options.md#optimizessr)

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)。

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 = {

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")
-  ]
-}
-```

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: [
     {

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

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: [
       {

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!
 ```

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,68 +26,19 @@ 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
 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'
       }
     ]
   }

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. 使用环境变量动态构建；