finish quick-start doc

Author: dolymood

document/components/docs/en-US/quick-start.md

@@ -12,33 +12,39 @@ It is recommended to use [babel-plugin-transform-modules](https://www.npmjs.com/
 
 Before use, the plugin needs some configuration. Modify .babelrc:
 
-- webpack 1.x
-  ```json
-  {
-    "plugins": ["transform-modules", {
-      "cube-ui": {
-        "transform": "cube-ui/lib/${member}",
-        "kebabCase": true,
-        "style": true
-      }
-    }]
-  }
-  ```
-- webpack 2+
-  ```json
-  {
-    "plugins": ["transform-modules", {
-      "cube-ui": {
-        "transform": "cube-ui/src/modules/${member}",
-        "kebabCase": true
-      }
-    }]
-  }
-  ```
+```json
+{
+  "plugins": ["transform-modules", {
+    "cube-ui": {
+      "transform": "cube-ui/lib/${member}",
+      "kebabCase": true,
+      "style": true
+    }
+  }]
+}
+```
+
+If not using babel-plugin-transform-modules, you need to import corresponding style files by hand:
+
+```js
+import 'cube-ui/lib/style.css'
+```
 
-  > [why distinguishs the version of webpack?](#/en-US/docs/post-compile)
+**Notice:** By default cube-ui will use [post-compile](#/en-US/docs/post-compile) with webpack 2+, but post-complie needs some dependencies and configuration. If you don't want to use post-compile, just modify the webpack config file:
 
-If not using babel-plugin-transform-modules, you need to import corresponding style files by hand.
+```js
+// webpack.config.js
+
+module.exports = {
+  // ...
+  resolve: {
+    // ...
+    // https://webpack.js.org/configuration/resolve/#resolve-mainfields
+    mainFields: ["main"]
+  }
+  // ...
+}
+```
 
 #### Fully import
 
@@ -111,3 +117,75 @@ import {
   }
 </script>
 ```
+
+
+### Use post-compile
+
+Since cube-ui will use [post-compile](#/en-US/docs/post-compile) with webpack 2+ by default, your application's webpack and babel configuration needs to be compatible with cube-ui.
+
+Follow the steps below:
+
+1. Modify package.json
+
+  ```json
+  {
+    // webpack-post-compile-plugin depends on compileDependencies
+    "compileDependencies": ["cube-ui"],
+    "devDependencies": {
+      // add stylus dependencies
+      "stylus": "^0.54.5",
+      "stylus-loader": "^2.1.1",
+      "webpack-post-compile-plugin": "^0.1.2"
+    }
+  }
+  ```
+
+2. Modify .babelrc：
+
+  ```json
+  {
+    "plugins": ["transform-modules", {
+      "cube-ui": {
+        "transform": "cube-ui/src/modules/${member}",
+        "kebabCase": true
+      }
+    }]
+  }
+  ```
+
+3. Modify webpack.base.conf.js
+
+  ```js
+  var PostCompilePlugin = require('webpack-post-compile-plugin')
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      new PostCompilePlugin()
+    ]
+    // ...
+  }
+  ```
+
+4. Modify `exports.cssLoaders` function in build/utils.js
+
+  ```js
+  exports.cssLoaders = function (options) {
+    // ...
+    const stylusOptions = {
+      'resolve url': true
+    }
+    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+    return {
+      css: generateLoaders(),
+      postcss: generateLoaders(),
+      less: generateLoaders('less'),
+      sass: generateLoaders('sass', { indentedSyntax: true }),
+      scss: generateLoaders('sass'),
+      stylus: generateLoaders('stylus', stylusOptions),
+      styl: generateLoaders('stylus', stylusOptions)
+    }
+  }
+  ```
+
+  See [https://github.com/vuejs-templates/webpack/pull/970/files](https://github.com/vuejs-templates/webpack/pull/970/files)

document/components/docs/zh-CN/quick-start.md

@@ -30,7 +30,7 @@ $ npm install cube-ui --save
 import 'cube-ui/lib/style.css'
 ```
 
-**注意：** cube-ui 搭配 webpack 2+ 默认就会走[后编译](#/zh-CN/docs/post-compile)，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可：
+**注意：** cube-ui 搭配 webpack 2+ 默认就会使用[后编译](#/zh-CN/docs/post-compile)，但是后编译需要有一些依赖以及配置（参见本页最后）；如果不想使用后编译的话，可以直接修改 webpack 配置即可：
 
 ```js
 // webpack.config.js
@@ -121,13 +121,13 @@ import {
 
 ### 使用后编译
 
-cube-ui 搭配 webpack 2+ 后就会默认走[后编译](#/zh-CN/docs/post-compile)，那么应用就需要兼容 cube-ui 的依赖和配置。
+cube-ui 搭配 webpack 2+ 后就会默认使用[后编译](#/zh-CN/docs/post-compile)，那么应用就需要兼容 cube-ui 的依赖和配置。
 
 1. 修改 package.json
 
   ```json
   {
-    // webpack-post-compile-plugin 使用 compileDependencies
+    // webpack-post-compile-plugin 依赖 compileDependencies
     "compileDependencies": ["cube-ui"],
     "devDependencies": {
       // 新增 stylus 相关依赖
@@ -137,18 +137,19 @@ cube-ui 搭配 webpack 2+ 后就会默认走[后编译](#/zh-CN/docs/post-compil
     }
   }
   ```
-  版本无强制要求。
 
 2. 修改 .babelrc：
 
   ```json
   {
-    "plugins": ["transform-modules", {
-      "cube-ui": {
-        "transform": "cube-ui/src/modules/${member}",
-        "kebabCase": true
-      }
-    }]
+    "plugins": [
+      ["transform-modules", {
+        "cube-ui": {
+          "transform": "cube-ui/src/modules/${member}",
+          "kebabCase": true
+        }
+      }]
+    ]
   }
   ```
 
@@ -166,11 +167,9 @@ cube-ui 搭配 webpack 2+ 后就会默认走[后编译](#/zh-CN/docs/post-compil
   }
   ```
 
-4. 修改 build/utils.js 中的 exports.cssLoaders 函数
+4. 修改 build/utils.js 中的 `exports.cssLoaders` 函数
 
   ```js
-
-  ```
   exports.cssLoaders = function (options) {
     // ...
     const stylusOptions = {
@@ -189,4 +188,4 @@ cube-ui 搭配 webpack 2+ 后就会默认走[后编译](#/zh-CN/docs/post-compil
   }
   ```
 
-  具体参见 https://github.com/vuejs-templates/webpack/pull/970/files
+  具体参见 [https://github.com/vuejs-templates/webpack/pull/970/files](https://github.com/vuejs-templates/webpack/pull/970/files)