From 963a7204a1ad25ffe8c1c31be220e53d8681913a Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Mon, 9 Apr 2018 22:49:58 +0800
Subject: [PATCH] add docs
---
README-zh_CN.md | 2 +-
docs/vue/customize-theme.en-US.md | 48 +++++++
docs/vue/customize-theme.zh-CN.md | 50 +++++++
docs/vue/getting-started.en-US.md | 206 ++++++++++++++++++++++++++++
docs/vue/getting-started.zh-CN.md | 205 ++++++++++++++++++++++++++++
docs/vue/i18n.en-US.md | 73 ++++++++++
docs/vue/i18n.zh-CN.md | 72 ++++++++++
docs/vue/introduce.en-US.md | 131 ++++++++++++++++++
docs/vue/introduce.zh-CN.md | 130 ++++++++++++++++++
docs/vue/use-with-vue-cli.en-US.md | 209 +++++++++++++++++++++++++++++
docs/vue/use-with-vue-cli.zh-CN.md | 208 ++++++++++++++++++++++++++++
site/components/demo.vue | 4 +-
site/components/demoBox.vue | 2 +-
site/components/header.vue | 13 +-
site/components/layout.vue | 164 ++++++++++++++++++++++
site/routes.js | 63 ++++++++-
16 files changed, 1566 insertions(+), 14 deletions(-)
create mode 100644 docs/vue/customize-theme.en-US.md
create mode 100644 docs/vue/customize-theme.zh-CN.md
create mode 100644 docs/vue/getting-started.en-US.md
create mode 100644 docs/vue/getting-started.zh-CN.md
create mode 100644 docs/vue/i18n.en-US.md
create mode 100644 docs/vue/i18n.zh-CN.md
create mode 100644 docs/vue/introduce.en-US.md
create mode 100644 docs/vue/introduce.zh-CN.md
create mode 100644 docs/vue/use-with-vue-cli.en-US.md
create mode 100644 docs/vue/use-with-vue-cli.zh-CN.md
create mode 100644 site/components/layout.vue
diff --git a/README-zh_CN.md b/README-zh_CN.md
index b023caced..47b9dc000 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -20,7 +20,7 @@ Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Vue 组件。
-- 全链路开发和设计工具体系。
+- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
## 安装
diff --git a/docs/vue/customize-theme.en-US.md b/docs/vue/customize-theme.en-US.md
new file mode 100644
index 000000000..2141f3407
--- /dev/null
+++ b/docs/vue/customize-theme.en-US.md
@@ -0,0 +1,48 @@
+
+# Customize Theme
+
+The structure and styles of vue-antd-ui are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.
+
+Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
+
+
+
+## Less variables
+
+We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
+
+- [Default Variables](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
+
+Please report an issue if the existing list of variables is not enough for you.
+
+## How to do it
+
+We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
+
+### 1) Using `theme` property (recommended way)
+
+Specify the `theme` property in the `package.json` or `.webpackrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
+- example of directly specifying the custom values as an object:
+```js
+"theme": {
+ "primary-color": "#1DA57A",
+},
+```
+
+### 2) Overriding Less variables (alternative way)
+
+Override variables via less definition files.
+
+Create a standalone less file like the one below, and import it in your project.
+
+ ```css
+ @import "~vue-antd-ui/dist/antd.less"; // import official less entry file
+ @import "your-theme-file.less"; // override variables here
+ ```
+
+Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
+
+## Related Articles
+
+- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
diff --git a/docs/vue/customize-theme.zh-CN.md b/docs/vue/customize-theme.zh-CN.md
new file mode 100644
index 000000000..5bf8ff0c9
--- /dev/null
+++ b/docs/vue/customize-theme.zh-CN.md
@@ -0,0 +1,50 @@
+
+# 定制主题
+
+vue-antd-ui的组件结构及样式和Antd React完全一致，你可以参考Antd React的定制方式进行配置。
+
+Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+
+
+
+## 样式变量
+
+antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
+
+- [默认样式变量](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
+
+如果以上变量不能满足你的定制需求，可以给我们提 issue。
+
+## 定制方式
+
+我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
+在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
+
+
+### 1) theme 属性（推荐）
+
+配置在 `package.json` 或 `.webpackrc` 下的 `theme` 字段。theme 可以配置为一个对象或文件路径。
+
+```js
+"theme": {
+ "primary-color": "#1DA57A",
+},
+```
+
+### 2) less
+
+用 less 文件进行变量覆盖。
+
+建立一个单独的 `less` 文件如下，再引入这个文件。
+
+ ```css
+ @import "~vue-antd-ui/dist/antd.less"; // 引入官方提供的 less 样式入口文件
+ @import "your-theme-file.less"; // 用于覆盖上面定义的变量
+ ```
+
+注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
+
+## 社区教程 for Antd React
+
+- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
diff --git a/docs/vue/getting-started.en-US.md b/docs/vue/getting-started.en-US.md
new file mode 100644
index 000000000..3213a4424
--- /dev/null
+++ b/docs/vue/getting-started.en-US.md
@@ -0,0 +1,206 @@
+
+# Getting Started
+
+Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
+
+> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
+
+
+## Playground
+
+The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.
+
+- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
+
+## First Local Development
+
+During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
+
+### 1. Installation
+
+[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [dva-cli](https://github.com/dvajs/dva-cli) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation.
+
+```bash
+$ npm install antd-init -g
+```
+
+Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
+
+> Also, you can try other scaffolds which is provided below:
+>
+> - [Ant Design Pro](http://pro.ant.design/)
+> - [antd-admin](https://github.com/zuiidea/antd-admin)
+> - [reactSPA](https://github.com/JasonBai007/reactSPA)
+> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
+> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
+> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
+> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
+> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
+> - more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
+
+### 2. Create a New Project
+
+A new project can be created using CLI tools.
+
+```bash
+$ mkdir antd-demo && cd antd-demo
+$ antd-init
+```
+
+`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
+
+### 3. Use antd's Components
+
+By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
+You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`.
+
+Replace the content of `index.js` with the following code.
+As you can see, there is no difference between antd's components and usual React components.
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { LocaleProvider, DatePicker, message } from 'antd';
+// The default locale is en-US, but we can change it to other language
+import frFR from 'antd/lib/locale-provider/fr_FR';
+import moment from 'moment';
+import 'moment/locale/fr';
+
+moment.locale('fr');
+
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ date: '',
+ };
+ }
+ handleChange(date) {
+ message.info('Selected Date: ' + date.toString());
+ this.setState({ date });
+ }
+ render() {
+ return (
+
+
+ this.handleChange(value)} />
+
Date: {this.state.date.toString()}
+
+
+ );
+ }
+}
+
+ReactDOM.render(, document.getElementById('root'));
+```
+
+> All the components in antd are listed in the sidebar.
+
+### 4. Development & Debugging
+
+Run your project and visit http://127.0.0.1:8000
+
+```bash
+$ npm start
+```
+
+### 5. Building & Deployment
+
+```bash
+$ npm run build
+```
+
+Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
+
+> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
+> But you can use those tools in your project, depending on your context and needs.
+
+## Compatibility
+
+Ant Design React supports all the modern browsers and IE9+.
+
+You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
+
+If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
+
+> Please avoid using both the babel and shim methods at the same time.
+
+> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### IE8 note
+
+> We don't support IE8 after `antd@2.0`.
+
+You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
+
+> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
+
+## Customized Work Flow
+
+If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code.
+
+Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
+
+If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd).
+
+There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute.
+
+
+## Import on Demand
+
+If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance.
+
+```
+You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
+```
+
+> 
+
+However, we can import individual components on demand:
+
+```jsx
+import Button from 'antd/lib/button';
+import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
+```
+
+We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
+
+```jsx
+import { Button } from 'antd';
+```
+
+And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
+
+> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles.
+
+## Customization
+
+- [Customize Theme](/docs/react/customize-theme)
+- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
+
+## Tips
+
+- You can use any `npm` modules.
+- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.
diff --git a/docs/vue/getting-started.zh-CN.md b/docs/vue/getting-started.zh-CN.md
new file mode 100644
index 000000000..4c9753597
--- /dev/null
+++ b/docs/vue/getting-started.zh-CN.md
@@ -0,0 +1,205 @@
+
+# 快速上手
+
+Ant Design React 致力于提供给程序员**愉悦**的开发体验。
+
+> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
+> 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。
+
+## 在线演示
+
+最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
+
+- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
+
+## 第一个本地实例
+
+实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
+我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
+
+### 1. 安装脚手架工具
+
+[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [dva-cli](https://github.com/dvajs/dva-cli) 和 [create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建。
+
+```bash
+$ npm install antd-init -g
+```
+
+更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
+
+> 您也可以使用以下脚手架和范例：
+>
+> - [Ant Design Pro](http://pro.ant.design/)
+> - [antd-admin](https://github.com/zuiidea/antd-admin)
+> - [reactSPA](https://github.com/JasonBai007/reactSPA)
+> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
+> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
+> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
+> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
+> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
+> - 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
+
+### 2. 创建一个项目
+
+使用命令行进行初始化。
+
+```bash
+$ mkdir antd-demo && cd antd-demo
+$ antd-init
+```
+
+antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
+
+若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
+
+### 3. 使用组件
+
+脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
+
+直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { LocaleProvider, DatePicker, message } from 'antd';
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+
+moment.locale('zh-cn');
+
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ date: '',
+ };
+ }
+ handleChange(date) {
+ message.info('您选择的日期是: ' + date.toString());
+ this.setState({ date });
+ }
+ render() {
+ return (
+
+
+
+
+
+
+
+## Features
+
+- An enterprise-class UI design language for web applications.
+- A set of high-quality React 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#兼容性))
+* Server-side Rendering
+
+## Version
+
+- Stable: [](https://www.npmjs.org/package/vue-antd-ui)
+
+You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design/releases.atom
+
+## Installation
+
+### Using npm or yarn
+
+**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
+
+```bash
+$ npm install vue-antd-ui --save
+```
+
+```bash
+$ yarn add vue-antd-ui
+```
+
+If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
+
+### Import in Browser
+
+Add `script` and `link` tags in your browser and use the global variable `antd`.
+
+We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `vue-antd-ui/dist` in antd's npm package. You can also download these files directly from [](https://www.jsdelivr.com/package/npm/vue-antd-ui) or [unpkg](https://unpkg.com/vue-antd-ui/dist/).
+
+> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
+
+> Note: you should import moment before using antd.js.
+
+## Usage
+
+```jsx
+import Vue from 'vue'
+import { DatePicker } from 'vue-antd-ui';
+Vue.component(DatePicker.name, DatePicker)
+```
+
+And import stylesheets manually:
+
+```jsx
+import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
+```
+
+### Use modularized antd
+
+- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
+
+ ```js
+ // .babelrc or babel-loader option
+ {
+ "plugins": [
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
+ ]
+ }
+ ```
+
+ > Note: Don't set `libraryDirectory` if you are using webpack 1.
+
+ This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
+
+ ```jsx
+ // import js and css modularly, parsed by babel-plugin-import
+ import { DatePicker } from 'vue-antd-ui';
+ ```
+
+- Manually import
+
+ ```jsx
+ import DatePicker from 'vue-antd-ui/lib/date-picker'; // for js
+ import 'vue-antd-ui/lib/date-picker/style/css'; // for css
+ // import 'vue-antd-ui/lib/date-picker/style'; // that will import less
+ ```
+
+
+## Links
+
+- [Home Page](https://vuecomponent.github.io/ant-design/)
+- [Ant Design React](https://ant.design/)
+- [Components](https://vuecomponent.github.io/ant-design/docs/react/introduce)
+- [Change Log](/ant-design/changelog)
+- [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports
+- [Customize Theme](/ant-design/docs/vue/customize-theme)
+
+
+
+## Contributing
+
+
+If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design/pulls). Feel free to report bugs and issues [here](https://github.com/vueComponent/ant-design/issues).
+
+> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
+
diff --git a/docs/vue/introduce.zh-CN.md b/docs/vue/introduce.zh-CN.md
new file mode 100644
index 000000000..36af48e27
--- /dev/null
+++ b/docs/vue/introduce.zh-CN.md
@@ -0,0 +1,130 @@
+
+# Ant Design of Vue
+
+这里是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
+
+
+
+ +
+
+
+
+
+
+
+## 特性
+
+- 提炼自企业级中后台产品的交互语言和视觉风格。
+- 开箱即用的高质量 Vue 组件。
+- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
+
+## 支持环境
+
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
+* 支持服务端渲染。
+
+## 版本
+
+- 稳定版：[](https://www.npmjs.org/package/vue-antd-ui)
+
+你可以订阅：https://github.com/vueComponent/ant-design/releases.atom 来获得稳定版发布的通知。
+
+## 安装
+
+### 使用 npm 或 yarn 安装
+
+**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+
+```bash
+$ npm install vue-antd-ui --save
+```
+
+```bash
+$ yarn add vue-antd-ui
+```
+
+如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
+
+### 浏览器引入
+
+在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。
+
+我们在 npm 发布包内的 `vue-antd-ui/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [](https://www.jsdelivr.com/package/npm/vue-antd-ui)
+ 或 [UNPKG](https://unpkg.com/vue-antd-ui/dist/) 进行下载。
+
+> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
+
+> 注意：引入 antd.js 前你需要自行引入 [moment](http://momentjs.com/)。
+
+## 示例
+
+```jsx
+import Vue from 'vue'
+import { DatePicker } from 'vue-antd-ui';
+Vue.component(DatePicker.name, DatePicker)
+```
+
+引入样式：
+
+```jsx
+import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
+```
+
+### 按需加载
+
+下面两种方式都可以只加载用到的组件。
+
+- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。
+
+ ```js
+ // .babelrc or babel-loader option
+ {
+ "plugins": [
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
+ ]
+ }
+ ```
+
+ > 注意：webpack 1 无需设置 `libraryDirectory`。
+
+ 然后只需从 vue-antd-ui 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
+
+ ```jsx
+ // babel-plugin-import 会帮助你加载 JS 和 CSS
+ import { DatePicker } from 'vue-antd-ui';
+ ```
+
+- 手动引入
+
+ ```jsx
+ import DatePicker from 'vue-antd-ui/lib/date-picker'; // 加载 JS
+ import 'vue-antd-ui/lib/date-picker/style/css'; // 加载 CSS
+ // import 'vue-antd-ui/lib/date-picker/style'; // 加载 LESS
+ ```
+
+## 链接
+
+- [首页](https://vuecomponent.github.io/ant-design/)
+- [Ant Design React](https://ant.design/)
+- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
+- [更新日志](/ant-design/changelog-cn)
+- [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
+- [定制主题](/ant-design/docs/vue/customize-theme-cn)
+
+
+## 如何贡献
+
+如果你希望参与贡献，欢迎 [Pull Request](https://github.com/vueComponent/ant-design/pulls)，或给我们 [报告 Bug](https://github.com/vueComponent/ant-design/issues)。
+
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
+
diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md
new file mode 100644
index 000000000..17d910a0c
--- /dev/null
+++ b/docs/vue/use-with-vue-cli.en-US.md
@@ -0,0 +1,209 @@
+
+# Use in create-react-app
+
+[create-react-app](https://github.com/facebookincubator/create-react-app) is one of the best React application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
+
+---
+
+## Install and Initialization
+
+We need to install `create-react-app` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
+
+```bash
+$ npm install -g create-react-app yarn
+```
+
+Create a new project named `antd-demo`.
+
+```bash
+$ create-react-app antd-demo
+```
+
+The tool will create and initialize environment and dependencies automatically,
+please try config your proxy setting or use another npm registry if any network errors happen during it.
+
+Then we go inside `antd-demo` and start it.
+
+```bash
+$ cd antd-demo
+$ yarn start
+```
+
+Open the browser at http://localhost:3000/. It renders a header saying "Welcome to React" on the page.
+
+## Import antd
+
+Below is the default directory structure.
+
+```
+├── README.md
+├── package.json
+├── public
+│ ├── favicon.ico
+│ └── index.html
+├── src
+│ ├── App.css
+│ ├── App.js
+│ ├── App.test.js
+│ ├── index.css
+│ ├── index.js
+│ └── logo.svg
+└── yarn.lock
+```
+
+Now we install `antd` from yarn or npm.
+
+```bash
+$ yarn add antd
+```
+
+Modify `src/App.js`, import Button component from `antd`.
+
+```jsx
+import React, { Component } from 'react';
+import Button from 'antd/lib/button';
+import './App.css';
+
+class App extends Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+Add `antd/dist/antd.css` at the top of `src/App.css`.
+
+```css
+@import '~antd/dist/antd.css';
+
+.App {
+ text-align: center;
+}
+
+...
+```
+
+Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
+
+
+## Advanced Guides
+
+We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo.
+For instance, we actually import all styles of components in the project which may be a network performance issue.
+
+Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
+
+Import react-app-rewired and modify the `scripts` field in package.json.
+
+```
+$ yarn add react-app-rewired --dev
+```
+
+```diff
+/* package.json */
+"scripts": {
+- "start": "react-scripts start",
++ "start": "react-app-rewired start",
+- "build": "react-scripts build",
++ "build": "react-app-rewired build",
+- "test": "react-scripts test --env=jsdom",
++ "test": "react-app-rewired test --env=jsdom",
+}
+```
+
+Then create a `config-overrides.js` at root directory of your project for further overriding.
+
+```js
+module.exports = function override(config, env) {
+ // do stuff with the webpack config...
+ return 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?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`.
+
+```bash
+$ yarn add babel-plugin-import --dev
+```
+
+```diff
++ const { injectBabelPlugin } = require('react-app-rewired');
+
+ module.exports = function override(config, env) {
++ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
+ return config;
+ };
+```
+
+Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
+
+```diff
+ // src/App.js
+ import React, { Component } from 'react';
+- import Button from 'antd/lib/button';
++ import { Button } from 'antd';
+ import './App.css';
+
+ class App extends Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+ }
+
+ export default App;
+```
+
+Then reboot with `yarn start` 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](/docs/react/getting-started#Import-on-Demand).
+
+### Customize Theme
+
+According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve this. Import it and modify `config-overrides.js` like below.
+
+```bash
+$ yarn add react-app-rewire-less --dev
+```
+
+```diff
+ const { injectBabelPlugin } = require('react-app-rewired');
++ const rewireLess = require('react-app-rewire-less');
+
+ module.exports = function override(config, env) {
+- config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
++ config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); // change importing css to less
++ config = rewireLess.withLoaderOptions({
++ modifyVars: { "@primary-color": "#1DA57A" },
++ })(config, env);
+ return config;
+ };
+```
+
+We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server.
+
+## eject
+
+You can also could try [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for a custom setup of create-react-app, although you should dig into it by yourself.
+
+## Source code and other boilerplates
+
+Finally, we used antd with create-react-app successfully, you can learn these practices for your own webpack workflow too, and find more webpack configs in the [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js). (For instance, add [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) to avoid loading all language files.)
+
+There are a lot of great boilerplates like create-react-app in the React community. There are some source code samples of importing antd in them if you encounter some problems.
+
+- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)
+- [comerc/cra-ts-antd](https://github.com/comerc/cra-ts-antd)
+- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate)
+- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit)
+- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
+- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd)
diff --git a/docs/vue/use-with-vue-cli.zh-CN.md b/docs/vue/use-with-vue-cli.zh-CN.md
new file mode 100644
index 000000000..18544a551
--- /dev/null
+++ b/docs/vue/use-with-vue-cli.zh-CN.md
@@ -0,0 +1,208 @@
+
+# 在 create-react-app 中使用
+
+[create-react-app](https://github.com/facebookincubator/create-react-app) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
+
+
+## 安装和初始化
+
+我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
+
+```bash
+$ npm install -g create-react-app yarn
+```
+
+然后新建一个项目。
+
+```bash
+$ create-react-app antd-demo
+```
+
+工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
+
+然后我们进入项目并启动。
+
+```bash
+$ cd antd-demo
+$ yarn start
+```
+
+此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
+
+## 引入 antd
+
+这是 create-react-app 生成的默认目录结构。
+
+```
+├── README.md
+├── package.json
+├── public
+│ ├── favicon.ico
+│ └── index.html
+├── src
+│ ├── App.css
+│ ├── App.js
+│ ├── App.test.js
+│ ├── index.css
+│ ├── index.js
+│ └── logo.svg
+└── yarn.lock
+```
+
+现在从 yarn 或 npm 安装并引入 antd。
+
+```bash
+$ yarn add antd
+```
+
+修改 `src/App.js`，引入 antd 的按钮组件。
+
+```jsx
+import React, { Component } from 'react';
+import Button from 'antd/lib/button';
+import './App.css';
+
+class App extends Component {
+ render() {
+ return (
+
+ +
+ 
+
+