diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index 48681ee5e..31c533664 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -13,7 +13,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
   <div>
     <a-button type="primary">Primary</a-button>
     <a-button>secondary</a-button>
-    <a-dropdown overlay={menu}>
+    <a-dropdown>
       <a-menu slot="overlay" @click="handleMenuClick">
         <a-menu-item key="1">1st item</a-menu-item>
         <a-menu-item key="2">2nd item</a-menu-item>
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
new file mode 100644
index 000000000..7c75988d7
--- /dev/null
+++ b/components/radio/demo/basic.md
@@ -0,0 +1,15 @@
+<cn>
+#### 基本
+最简单的用法。
+</cn>
+
+<us>
+#### Basic
+The simplest use.
+</us>
+
+```html
+<template>
+  <a-radio>Radio</a-radio>
+</template>
+```
diff --git a/components/radio/demo/basic.vue b/components/radio/demo/basic.vue
deleted file mode 100644
index 02c275f0c..000000000
--- a/components/radio/demo/basic.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <Radio>Radio</Radio>
-  </div>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  components: {
-    Radio,
-  },
-}
-</script>
diff --git a/components/radio/demo/disabled.vue b/components/radio/demo/disabled.md
similarity index 60%
rename from components/radio/demo/disabled.vue
rename to components/radio/demo/disabled.md
index 25c099c59..e294fc2b3 100644
--- a/components/radio/demo/disabled.vue
+++ b/components/radio/demo/disabled.md
@@ -1,8 +1,19 @@
+<cn>
+#### 不可用
+Radio 不可用。
+</cn>
+
+<us>
+#### disabled
+Radio unavailable.
+</us>
+
+```html
 <template>
   <div>
-    <Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
+    <a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
     <br />
-    <Radio defaultChecked :disabled="disabled">Disabled</Radio>
+    <a-radio defaultChecked :disabled="disabled">Disabled</a-radio>
     <div :style="{ marginTop: 20 }">
       <a-button type="primary" @click="toggleDisabled">
         Toggle disabled
@@ -11,7 +22,6 @@
   </div>
 </template>
 <script>
-import { Radio, Button } from 'antd'
 export default {
   data () {
     return {
@@ -23,9 +33,6 @@ export default {
       this.disabled = !this.disabled
     },
   },
-  components: {
-    Radio,
-
-  },
 }
 </script>
+```
diff --git a/components/radio/demo/index.vue b/components/radio/demo/index.vue
index 286eaf116..7dab9bfbf 100644
--- a/components/radio/demo/index.vue
+++ b/components/radio/demo/index.vue
@@ -1,23 +1,3 @@
-<template>
-  <div>
-    <h1>Basic</h1>
-    <Basic />
-    <h1>Disabled</h1>
-    <Disabled />
-    <h1>RadioButton</h1>
-    <RadioButton />
-    <h1>RadioGroupMore</h1>
-    <RadioGroupMore />
-    <h1>RadioGroupOptions</h1>
-    <RadioGroupOptions />
-    <h1>RadioGroupWithName</h1>
-    <RadioGroupWithName />
-    <h1>RadioGroup</h1>
-    <RadioGroup />
-    <h1>Size</h1>
-    <Size />
-  </div>
-</template>
 <script>
 import Basic from './basic'
 import Disabled from './disabled'
@@ -27,20 +7,53 @@ import RadioGroupOptions from './radioGroup-options'
 import RadioGroupWithName from './radioGroup-with-name'
 import RadioGroup from './radioGroup'
 import Size from './size'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 单选框
+  单选框。
+
+## 何时使用
+
+- 用于在多个备选项中选中单个状态。
+- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
+        ## 代码演示`,
+  us: `# Radio
+  Radio.
+
+## When To Use
+
+- Used to select a single state in multiple options.
+- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
+  ## Examples
+  `,
+}
 export default {
   category: 'Components',
   subtitle: '单选框',
   type: 'Data Entry',
   title: 'Radio',
-  components: {
-    Basic,
-    Disabled,
-    RadioButton,
-    RadioGroupMore,
-    RadioGroupOptions,
-    RadioGroupWithName,
-    RadioGroup,
-    Size,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic />
+        <Disabled />
+        <RadioButton />
+        <RadioGroupMore />
+        <RadioGroupOptions />
+        <RadioGroupWithName />
+        <RadioGroup />
+        <Size />
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/radio/demo/radioButton.md b/components/radio/demo/radioButton.md
new file mode 100644
index 000000000..f3917b84e
--- /dev/null
+++ b/components/radio/demo/radioButton.md
@@ -0,0 +1,49 @@
+<cn>
+#### 按钮样式
+按钮样式的单选组合。
+</cn>
+
+<us>
+#### radio style
+The combination of radio button style.
+</us>
+
+```html
+<template>
+  <div>
+    <div>
+      <a-radio-group @change="onChange" defaultValue="a">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b">Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div :style="{ marginTop: '16px' }">
+      <a-radio-group @change="onChange" defaultValue="a">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b" disabled>Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div :style="{ marginTop: '16px' }">
+      <a-radio-group disabled @change="onChange" defaultValue="a">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b">Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.value}`)
+    },
+  },
+}
+</script>
+```
diff --git a/components/radio/demo/radioButton.vue b/components/radio/demo/radioButton.vue
deleted file mode 100644
index 6b54f15a3..000000000
--- a/components/radio/demo/radioButton.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <div>
-      <RadioGroup @change="onChange" defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-    <div :style="{ marginTop: '16px' }">
-      <RadioGroup @change="onChange" defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b" disabled>Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-    <div :style="{ marginTop: '16px' }">
-      <RadioGroup disabled @change="onChange" defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-  </div>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  methods: {
-    onChange (e) {
-      console.log(`checked = ${e.target.value}`)
-    },
-  },
-  components: {
-    RadioButton: Radio.Button,
-    RadioGroup: Radio.Group,
-  },
-}
-</script>
diff --git a/components/radio/demo/radioGroup-more.md b/components/radio/demo/radioGroup-more.md
new file mode 100644
index 000000000..d3c983d86
--- /dev/null
+++ b/components/radio/demo/radioGroup-more.md
@@ -0,0 +1,42 @@
+<cn>
+#### RadioGroup 垂直
+垂直的 RadioGroup，配合更多输入框选项。
+</cn>
+
+<us>
+#### Vertical RadioGroup
+Vertical RadioGroup, with more radios.
+</us>
+
+```html
+<template>
+  <a-radio-group @change="onChange" v-model="value">
+    <a-radio :style="radioStyle" :value="1">Option A</a-radio>
+    <a-radio :style="radioStyle" :value="2">Option B</a-radio>
+    <a-radio :style="radioStyle" :value="3">Option C</a-radio>
+    <a-radio :style="radioStyle" :value="4">
+      More...
+      <a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
+    </a-radio>
+  </a-radio-group>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      value: 1,
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+      },
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+}
+</script>
+```
diff --git a/components/radio/demo/radioGroup-more.vue b/components/radio/demo/radioGroup-more.vue
deleted file mode 100644
index 6ade73275..000000000
--- a/components/radio/demo/radioGroup-more.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <RadioGroup @change="onChange" v-model="value">
-    <Radio :style="radioStyle" :value="1">Option A</Radio>
-    <Radio :style="radioStyle" :value="2">Option B</Radio>
-    <Radio :style="radioStyle" :value="3">Option C</Radio>
-    <Radio :style="radioStyle" :value="4">
-      More...
-      <Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
-    </Radio>
-  </RadioGroup>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  data () {
-    return {
-      value: 1,
-      radioStyle: {
-        display: 'block',
-        height: '30px',
-        lineHeight: '30px',
-      },
-    }
-  },
-  methods: {
-    onChange (e) {
-      console.log('radio checked', e.target.value)
-    },
-  },
-  components: {
-    Radio,
-    RadioGroup: Radio.Group,
-  },
-}
-</script>
diff --git a/components/radio/demo/radioGroup-options.vue b/components/radio/demo/radioGroup-options.md
similarity index 65%
rename from components/radio/demo/radioGroup-options.vue
rename to components/radio/demo/radioGroup-options.md
index 6d5f55f14..dc48341a8 100644
--- a/components/radio/demo/radioGroup-options.vue
+++ b/components/radio/demo/radioGroup-options.md
@@ -1,14 +1,24 @@
+<cn>
+#### RadioGroup 组合 - 配置方式
+通过配置 `options` 参数来渲染单选框。
+</cn>
+
+<us>
+#### RadioGroup group - optional
+Render radios by configuring `options`.
+</us>
+
+```html
 <template>
 <div>
-  <RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
+  <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
   <br />
-  <RadioGroup :options="options" @change="onChange2" v-model="value2" />
+  <a-radio-group :options="options" @change="onChange2" v-model="value2" />
   <br />
-  <RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
+  <a-radio-group :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
 </div>
 </template>
 <script>
-import { Radio } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -42,9 +52,6 @@ export default {
       console.log('radio3 checked', e.target.value)
     },
   },
-  components: {
-    Radio,
-    RadioGroup: Radio.Group,
-  },
 }
 </script>
+```
diff --git a/components/radio/demo/radioGroup-with-name.md b/components/radio/demo/radioGroup-with-name.md
new file mode 100644
index 000000000..a7decb0ac
--- /dev/null
+++ b/components/radio/demo/radioGroup-with-name.md
@@ -0,0 +1,20 @@
+<cn>
+#### 单选组合 - 配合 name 使用
+可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
+</cn>
+
+<us>
+#### RadioGroup with name
+Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
+</us>
+
+```html
+<template>
+  <a-radio-group name="radioGroup" :defaultValue="1">
+    <a-radio :value="1">A</a-radio>
+    <a-radio :value="2">B</a-radio>
+    <a-radio :value="3">C</a-radio>
+    <a-radio :value="4">D</a-radio>
+  </a-radio-group>
+</template>
+```
diff --git a/components/radio/demo/radioGroup-with-name.vue b/components/radio/demo/radioGroup-with-name.vue
deleted file mode 100644
index ab272d8f7..000000000
--- a/components/radio/demo/radioGroup-with-name.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <RadioGroup name="radioGroup" :defaultValue="1">
-    <Radio :value="1">A</Radio>
-    <Radio :value="2">B</Radio>
-    <Radio :value="3">C</Radio>
-    <Radio :value="4">D</Radio>
-  </RadioGroup>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  components: {
-    Radio,
-    RadioGroup: Radio.Group,
-  },
-}
-</script>
diff --git a/components/radio/demo/radioGroup.md b/components/radio/demo/radioGroup.md
new file mode 100644
index 000000000..09d8807d5
--- /dev/null
+++ b/components/radio/demo/radioGroup.md
@@ -0,0 +1,34 @@
+<cn>
+#### 单选组合
+一组互斥的 Radio 配合使用。
+</cn>
+
+<us>
+#### Radio Group
+A group of radio components.
+</us>
+
+```html
+<template>
+  <a-radio-group @change="onChange" v-model="value">
+    <a-radio :value="1">A</a-radio>
+    <a-radio :value="2">B</a-radio>
+    <a-radio :value="3">C</a-radio>
+    <a-radio :value="4">D</a-radio>
+  </a-radio-group>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      value: 1,
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+}
+</script>
+```
diff --git a/components/radio/demo/radioGroup.vue b/components/radio/demo/radioGroup.vue
deleted file mode 100644
index 085211370..000000000
--- a/components/radio/demo/radioGroup.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <RadioGroup @change="onChange" v-model="value">
-    <Radio :value="1">A</Radio>
-    <Radio :value="2">B</Radio>
-    <Radio :value="3">C</Radio>
-    <Radio :value="4">D</Radio>
-  </RadioGroup>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  data () {
-    return {
-      value: 1,
-    }
-  },
-  methods: {
-    onChange (e) {
-      console.log('radio checked', e.target.value)
-    },
-  },
-  components: {
-    Radio,
-    RadioGroup: Radio.Group,
-  },
-}
-</script>
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
new file mode 100644
index 000000000..c9b6cdf67
--- /dev/null
+++ b/components/radio/demo/size.md
@@ -0,0 +1,40 @@
+<cn>
+#### 单选组合
+一组互斥的 Radio 配合使用。
+</cn>
+
+<us>
+#### Radio Group
+A group of radio components.
+</us>
+
+```html
+<template>
+  <div>
+    <div>
+      <a-radio-group defaultValue="a" size="large">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b">Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div :style="{ marginTop: '16px' }">
+      <a-radio-group defaultValue="a">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b">Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div :style="{ marginTop: '16px' }">
+      <a-radio-group defaultValue="a" size="small">
+        <a-radio-button value="a">Hangzhou</a-radio-button>
+        <a-radio-button value="b">Shanghai</a-radio-button>
+        <a-radio-button value="c">Beijing</a-radio-button>
+        <a-radio-button value="d">Chengdu</a-radio-button>
+      </a-radio-group>
+    </div>
+  </div>
+</template>
+```
diff --git a/components/radio/demo/size.vue b/components/radio/demo/size.vue
deleted file mode 100644
index d9c6b44c6..000000000
--- a/components/radio/demo/size.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <div>
-      <RadioGroup defaultValue="a" size="large">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-    <div :style="{ marginTop: '16px' }">
-      <RadioGroup defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-    <div :style="{ marginTop: '16px' }">
-      <RadioGroup defaultValue="a" size="small">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
-    </div>
-  </div>
-</template>
-<script>
-import { Radio } from 'antd'
-export default {
-  components: {
-    RadioButton: Radio.Button,
-    RadioGroup: Radio.Group,
-  },
-}
-</script>
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
new file mode 100644
index 000000000..8232afdb5
--- /dev/null
+++ b/components/radio/index.en-US.md
@@ -0,0 +1,41 @@
+
+
+## API
+
+### Radio
+
+| Property | Description | Type | optional | Default |
+| -------- | ----------- | ---- | -------- | ------- |
+| autoFocus | get focus when component mounted | boolean | false |  |
+| checked | Specifies whether the radio is selected. | boolean |  | false |
+| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean |  | false |
+| disabled | Disable radio | boolean |  | false |
+| value | According to value for comparison, to determine whether the selected | any |  | none |
+
+### RadioGroup
+
+radio group，wrap a group of `Radio`。
+
+| Property | Description | Type | optional | Default |
+| -------- | ----------- | ---- | -------- | ------- |
+| defaultValue | Default selected value | any | none | none |
+| disabled | Disable all radio buttons | boolean |  | false |
+| name | The `name` property of all `input[type="radio"]` children | string |  | none |
+| options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 | 无 |
+| size | Size, only on radio style | string | `large` `default` `small` | `default` |
+| value(v-model) | Used for setting the currently selected value. | any | none | none |
+
+
+### RadioGroup Events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | The callback function that is triggered when the state changes. | Function(e:Event) |
+
+## Methods
+
+### Radio
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
new file mode 100644
index 000000000..802660b3a
--- /dev/null
+++ b/components/radio/index.zh-CN.md
@@ -0,0 +1,39 @@
+
+
+## API
+
+### Radio
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| checked | 指定当前是否选中 | boolean | false |
+| defaultChecked | 初始是否选中 | boolean | false |
+| value | 根据 value 进行比较，判断是否选中 | any | 无 |
+
+### RadioGroup
+
+单选框组合，用于包裹一组 `Radio`。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认选中的值 | any | 无 |
+| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | 无 |
+| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 |
+| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` |
+| value(v-model) | 用于设置当前选中的值 | any | 无 |
+
+### RadioGroup 事件
+
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选项变化时的回调函数 | Function(e:Event) |
+
+## 方法
+
+### Radio
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
diff --git a/components/select/index.jsx b/components/select/index.jsx
index ace180d0d..0036f2230 100644
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@@ -27,6 +27,7 @@ const AbstractSelectProps = {
   ]),
   autoFocus: PropTypes.bool,
   backfill: PropTypes.bool,
+  showArrow: PropTypes.bool,
 }
 const Value = PropTypes.shape({
   key: String,
diff --git a/docs/vue/i18n.en-US.md b/docs/vue/i18n.en-US.md
index e6e4e5f4d..ef258fb56 100644
--- a/docs/vue/i18n.en-US.md
+++ b/docs/vue/i18n.en-US.md
@@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
 
 ## LocaleProvider
 
-vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
+vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
 
 ````html
 <template>
diff --git a/docs/vue/introduce.en-US.md b/docs/vue/introduce.en-US.md
index 52d8b1ecd..b91bf0d58 100644
--- a/docs/vue/introduce.en-US.md
+++ b/docs/vue/introduce.en-US.md
@@ -26,12 +26,12 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
 ## Features
 
 - An enterprise-class UI design language for web applications.
-- A set of high-quality React components out of the box.
+- A set of high-quality Vue components out of the box.
 - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
 
 ## Environment Support
 
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性))
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
 * Server-side Rendering
 
 ## Version
diff --git a/docs/vue/introduce.zh-CN.md b/docs/vue/introduce.zh-CN.md
index 12706aa0e..bc5a01f7a 100644
--- a/docs/vue/introduce.zh-CN.md
+++ b/docs/vue/introduce.zh-CN.md
@@ -30,7 +30,7 @@
 
 ## 支持环境
 
-* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)）。
 * 支持服务端渲染。
 
 ## 版本
@@ -118,7 +118,7 @@ import 'vue-antd-ui/dist/antd.css';  // or 'vue-antd-ui/dist/antd.less'
 
 - [首页](https://vuecomponent.github.io/ant-design/)
 - [Ant Design React](https://ant.design/)
-- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
+- [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
 - [更新日志](/ant-design/changelog-cn)
 - [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
 - [定制主题](/ant-design/docs/vue/customize-theme-cn)
diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md
index ad613ba4e..e36031b5b 100644
--- a/docs/vue/use-with-vue-cli.en-US.md
+++ b/docs/vue/use-with-vue-cli.en-US.md
@@ -3,7 +3,6 @@
 
 [vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
 
----
 
 ## Install and Initialization
 
@@ -100,7 +99,7 @@ Now we need to customize the default webpack config.
 
 ### Use babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)).
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -150,7 +149,7 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
   })
 ```
 
-Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started#Import-on-Demand).
+Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
 
 ### Customize Theme
 
diff --git a/docs/vue/use-with-vue-cli.zh-CN.md b/docs/vue/use-with-vue-cli.zh-CN.md
index 6e36417c5..5dba78e9b 100644
--- a/docs/vue/use-with-vue-cli.zh-CN.md
+++ b/docs/vue/use-with-vue-cli.zh-CN.md
@@ -96,7 +96,7 @@ new Vue({
 
 ### 使用 babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started-cn/#按需加载)）。
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -147,7 +147,7 @@ $ yarn add babel-plugin-import --dev
   })
 ```
 
-最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。
+最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
 
 ### 自定义主题
 
diff --git a/site/components/demo.vue b/site/components/demo.vue
deleted file mode 100644
index c8bd19770..000000000
--- a/site/components/demo.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-import * as AllDemo from '../demo'
-import Header from './header'
-import zhCN from 'antd/locale-provider/zh_CN'
-import enUS from 'antd/locale-provider/default'
-import _ from 'lodash'
-import { isZhCN } from '../util'
-import { Provider, create } from '../../components/_util/store'
-
-export default {
-  data () {
-    this.store = create({
-      currentSubMenu: [],
-    })
-    this.subscribe()
-    return {
-      currentSubMenu: [],
-    }
-  },
-  beforeDestroy () {
-    if (this.unsubscribe) {
-      this.unsubscribe()
-    }
-  },
-  watch: {
-    '$route.params.name': function () {
-      this.store.setState({ currentSubMenu: [] })
-    },
-  },
-  methods: {
-    subscribe () {
-      const { store } = this
-      this.unsubscribe = store.subscribe(() => {
-        this.currentSubMenu = this.store.getState().currentSubMenu
-      })
-    },
-    getSubMenu (isCN) {
-      const currentSubMenu = this.currentSubMenu
-      const lis = []
-      currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
-        const title = isCN ? cnTitle : usTitle
-        const className = window.location.hash === `#${id}` ? 'current' : ''
-        lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
-      })
-      return (
-        <a-affix>
-          <ul id='demo-toc' class='toc'>
-            {lis}
-            <li title='API' key='API'>
-              <a
-                href='#api'
-                class={{
-                  current: window.location.hash === '#api',
-                }}
-              >API</a>
-            </li>
-          </ul>
-        </a-affix>
-      )
-    },
-  },
-  render () {
-    const { name } = this.$route.params
-    const isCN = isZhCN(name)
-    const lang = isCN ? 'cn' : 'us'
-    // name = name.replace(/-cn\/?$/, '')
-    const titleMap = {}
-    const menuConfig = {
-      General: [],
-      Layout: [],
-      Navigation: [],
-      'Data Entry': [],
-      'Data Display': [],
-      Feedback: [],
-      Other: [],
-    }
-    for (const [title, d] of Object.entries(AllDemo)) {
-      const type = d.type || 'Other'
-      const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
-      titleMap[key] = title
-      menuConfig[type] = menuConfig[type] || []
-      menuConfig[type].push(d)
-    }
-    const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
-    const MenuGroup = []
-    for (const [type, menus] of Object.entries(menuConfig)) {
-      const MenuItems = []
-      _.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
-        const linkValue = lang === 'cn'
-          ? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
-          : [<span>{title}</span>]
-        let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
-        if (lang === 'cn') {
-          key = `${key}-cn`
-        }
-        MenuItems.push(<a-menu-item key={key}>
-          <router-link to={{ path: `/ant-design/components/${key}/` }}>{linkValue}</router-link>
-        </a-menu-item>)
-      })
-      MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
-    }
-    let locale = zhCN
-    if (lang !== 'cn') {
-      locale = enUS
-    }
-    return (
-      <div class='page-wrapper'>
-        <Header num={Object.keys(AllDemo).length}/>
-
-        <a-locale-provider locale={locale}>
-          <div class='main-wrapper'>
-            <a-row>
-              <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
-                <a-menu
-                  class='aside-container menu-site'
-                  selectedKeys={[name]}
-                  defaultOpenKeys={['Components']}
-                  inlineIndent={40}
-                  mode='inline'>
-                  <a-sub-menu title='Components' key='Components'>
-                    {MenuGroup}
-                  </a-sub-menu>
-                </a-menu>
-              </a-col>
-              <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
-                <div class='content main-container'>
-                  <div class='toc-affix' style='width: 110px;'>
-                    {this.getSubMenu(isCN)}
-                  </div>
-                  {Demo ? <Provider store={this.store}><Demo key={lang}/></Provider> : '正在紧急开发中...'}
-                </div>
-              </a-col>
-            </a-row>
-          </div>
-        </a-locale-provider>
-      </div>
-    )
-  },
-}
-</script>
diff --git a/site/components/header.vue b/site/components/header.vue
index 58c102587..833436693 100644
--- a/site/components/header.vue
+++ b/site/components/header.vue
@@ -1,12 +1,15 @@
 <script>
 import { isZhCN } from '../util'
+import _ from 'lodash'
 export default {
   props: {
     num: Number,
     name: String,
+    searchData: Array,
   },
   data () {
     return {
+      value: null,
     }
   },
   methods: {
@@ -18,10 +21,14 @@ export default {
         path: path.replace(name, newName),
       })
     },
+    onSelect (val) {
+      this.$router.push(val)
+      this.value = val
+    },
   },
   render () {
     const name = this.name
-
+    const searchData = _.sortBy(this.searchData, ['title'])
     const isCN = isZhCN(name)
     return (
       <header id='header'>
@@ -33,8 +40,26 @@ export default {
             </router-link>
           </a-col>
           <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
-            <div id='search-box'>
-              进度：{this.num} / 52
+            <div id='search-box' style='display: block'>
+              <a-icon type='search' />
+              <a-select
+                ref='selectBox'
+                placeholder={isCN ? '搜索组件...' : 'input search text'}
+                style='width: 200px'
+                defaultActiveFirstOption={false}
+                showArrow={false}
+                showSearch
+                onSelect={this.onSelect}
+                optionFilterProp='children'
+                key={this.value}
+              >
+                {
+                  searchData.map(({ title, subtitle, url }) =>
+                    <a-select-option key={url}>
+                      {title} {isCN && subtitle}
+                    </a-select-option>)
+                }
+              </a-select>
             </div>
             <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
               {isCN ? 'English' : '中文'}
diff --git a/site/components/layout.vue b/site/components/layout.vue
index 6308a2a1f..8602e2684 100644
--- a/site/components/layout.vue
+++ b/site/components/layout.vue
@@ -25,12 +25,31 @@ export default {
       this.unsubscribe()
     }
   },
+  mounted () {
+    this.addSubMenu()
+  },
   watch: {
-    '$route': function () {
+    '$route.path': function () {
       this.store.setState({ currentSubMenu: [] })
+      this.addSubMenu()
     },
   },
   methods: {
+    addSubMenu () {
+      if (this.$route.path.indexOf('/docs/vue/') !== -1) {
+        this.$nextTick(() => {
+          const menus = []
+          this.$refs.doc.querySelectorAll(['h2', 'h3']).forEach(dom => {
+            const id = dom.id
+            if (id) {
+              const title = dom.textContent.split('#')[0].trim()
+              menus.push({ cnTitle: title, usTitle: title, id })
+            }
+          })
+          this.currentSubMenu = menus
+        })
+      }
+    },
     subscribe () {
       const { store } = this
       this.unsubscribe = store.subscribe(() => {
@@ -42,21 +61,22 @@ export default {
       const lis = []
       currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
         const title = isCN ? cnTitle : usTitle
-        const className = window.location.hash === `#${id}` ? 'current' : ''
+        const className = decodeURIComponent(window.location.hash) === `#${id}` ? 'current' : ''
         lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
       })
+      const showApi = this.$route.path.indexOf('/components/') !== -1
       return (
         <a-affix>
           <ul id='demo-toc' class='toc'>
             {lis}
-            <li title='API' key='API'>
+            {showApi ? <li title='API' key='API'>
               <a
-                href='#api'
+                href='#API'
                 class={{
-                  current: window.location.hash === '#api',
+                  current: window.location.hash === '#API',
                 }}
               >API</a>
-            </li>
+            </li> : ''}
           </ul>
         </a-affix>
       )
@@ -93,6 +113,7 @@ export default {
       Feedback: [],
       Other: [],
     }
+    const searchData = []
     for (const [title, d] of Object.entries(AllDemo)) {
       const type = d.type || 'Other'
       const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
@@ -112,6 +133,11 @@ export default {
         if (isCN) {
           key = `${key}-cn`
         }
+        searchData.push({
+          title,
+          subtitle,
+          url: `/ant-design/components/${key}/`,
+        })
         MenuItems.push(<a-menu-item key={key}>
           <router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link>
         </a-menu-item>)
@@ -124,7 +150,7 @@ export default {
     }
     return (
       <div class='page-wrapper'>
-        <Header num={Object.keys(AllDemo).length} name={name}/>
+        <Header num={Object.keys(AllDemo).length} searchData={searchData} name={name}/>
         <a-locale-provider locale={locale}>
           <div class='main-wrapper'>
             <a-row>
@@ -144,12 +170,12 @@ export default {
               <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
                 <div class='content main-container'>
                   <div class='toc-affix' style='width: 110px;'>
-                    {Demo ? this.getSubMenu(isCN) : ''}
+                    {this.getSubMenu(isCN)}
                   </div>
                   {Demo ? <Provider store={this.store}>
                     <Demo key={isCN ? 'cn' : 'en'}/>
                   </Provider> : ''}
-                  <div class='markdown api-container'>
+                  <div class='markdown api-container' ref='doc'>
                     <router-view></router-view>
                   </div>
                 </div>
diff --git a/site/index.less b/site/index.less
index 7abb49a15..b68d30d9d 100644
--- a/site/index.less
+++ b/site/index.less
@@ -61,4 +61,12 @@
   right: 15px;
   top: 10px;
 }
-
+#search-box {
+  .ant-select-focused,
+  .ant-select-selection,
+  .ant-select-selection:focus,
+  .ant-select-selection:active {
+    border: none;
+    box-shadow: none;
+  }
+}
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 0fe743cfe..8256cafac 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -47,7 +47,7 @@ const md = require('markdown-it')('default', {
   highlight: renderHighlight,
 }).use(require('markdown-it-anchor'), {
   level: 2,
-  // slugify: string => string,
+  slugify: string => string.trim().split(' ').join('-'),
   permalink: true,
   // renderPermalink: (slug, opts, state, permalink) => {},
   permalinkClass: 'anchor',