From 4e57dfa797a1b67a855ed0ff09f51196abec0c50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 9 Aug 2017 16:19:11 +0800
Subject: [PATCH] update README.md:  add babel-plugin-import

---
 README.md       | 39 ++++++++++++++++++++++++++-------------
 README.zh-CN.md | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index baf5f132e..93081b44c 100644
--- a/README.md
+++ b/README.md
@@ -18,11 +18,36 @@ npm i -S vant
 ```
  
 ## Usage
+
+### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
+
+   ```js
+   // .babelrc or babel-loader option
+   {
+     "plugins": [
+       ["import", { "libraryName": "vant", "style": true }]
+     ]
+   }
+   ```
+
+   Then you can import components from vant, equivalent to import manually below.
+
+   ```js
+   // import js and css modularly, parsed by babel-plugin-import
+   import { Button } from 'vant';
+   ```
+
+### Manually import
+
+   ```jsx
+   import { Button } from 'vant';
+   import 'vant/lib/vant-css/button.css';
+   ```
  
  
 ### Import all components
  
-```javascript
+```javascrip
 import Vue from 'vue';
 import vant from 'vant';
 import 'vant/lib/vant-css/index.css';
@@ -30,18 +55,6 @@ import 'vant/lib/vant-css/index.css';
 Vue.use(vant);
 ```
  
-### On demand
-
-```javascript
-import Vue from 'vue';
-import { Button, Cell } from 'vant';
-import 'vant/lib/vant-css/button.css';
-import 'vant/lib/vant-css/cell.css';
-
-Vue.component(Button.name, Button);
-Vue.component(Cell.name, Cell);
-```
-
 ## Development
 
 ### Add a new component
diff --git a/README.zh-CN.md b/README.zh-CN.md
index b4596c24d..e0c87b6a8 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -18,28 +18,40 @@ npm i -S vant
 ## 二、使用
  
  
-### 1. 导入所有组件
+### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+
+   ```js
+   // .babelrc or babel-loader option
+   {
+     "plugins": [
+       ["import", { "libraryName": "vant", "style": true }]
+     ]
+   }
+   ```
+   
+   接着你可以直接引入 vant 组件，等价于下方的按需引入组件
+
+   ```js
+   // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
+   import { Button } from 'vant';
+   ```
+
+### 按需引入组件
+
+   ```jsx
+   import { Button } from 'vant/lib/button';
+   import 'vant/lib/vant-css/button.css';
+   ```
  
-```javascript
+### 导入所有组件
+ 
+```javascrip
 import Vue from 'vue';
 import vant from 'vant';
-// 你也可以使用自己的主题
 import 'vant/lib/vant-css/index.css';
 
 Vue.use(vant);
 ```
- 
-### 2. 按需导入组件
-
-```javascript
-import Vue from 'vue';
-import { Button, Cell } from 'vant';
-import 'vant/lib/vant-css/button.css';
-import 'vant/lib/vant-css/cell.css';
-
-Vue.component(Button.name, Button);
-Vue.component(Cell.name, Cell);
-```
 
 ## 三、开发