Skip to content

Commit 15fd712

Browse files
committed
fix docs
1 parent 628a0f8 commit 15fd712

12 files changed

+275
-548
lines changed

README-zh_CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</a>
55
</p>
66

7-
# [Vue Ant Design](https://vuecomponent.github.io/ant-design/)
7+
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
88
[![Travis branch](https://api.travis-ci.org/vueComponent/ant-design.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design)
99
[![Dependency Status](https://beta.gemnasium.com/badges/github.com/vueComponent/ant-design.svg)](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
1010
[![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat)](https://www.npmjs.org/package/vue-antd-ui)

README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</a>
55
</p>
66

7-
# [Vue Ant Design](https://vuecomponent.github.io/ant-design/)
7+
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
88
[![Travis branch](https://api.travis-ci.org/vueComponent/ant-design.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design)
99
[![Dependency Status](https://beta.gemnasium.com/badges/github.com/vueComponent/ant-design.svg)](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
1010
[![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat)](https://www.npmjs.org/package/vue-antd-ui)
@@ -16,16 +16,16 @@ An enterprise-class UI components based on Ant Design 3.X and Vue.
1616

1717
[中文 README](README-zh_CN.md)
1818

19-
## 特性
19+
## Features
2020

2121
- An enterprise-class UI design system for desktop applications.
2222
- A set of high-quality React components out of the box.
23-
- The whole package of development and design resources and tools.
23+
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
2424

2525

26-
## 安装
26+
## Using npm or yarn
2727

28-
### 使用 npm yarn 安装
28+
**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.
2929

3030
```bash
3131
$ npm install vue-antd-ui --save
@@ -35,12 +35,12 @@ $ npm install vue-antd-ui --save
3535
$ yarn add vue-antd-ui
3636
```
3737

38-
如果你的网络环境不佳,推荐使用 [cnpm](https://github.com/cnpm/cnpm)
38+
If you are in a bad network environment,you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
3939

4040

41-
## 链接
41+
## Links
4242

43-
- [首页](https://vuecomponent.github.io/ant-design/)
44-
- [Vue官方文档](https://cn.vuejs.org/)
43+
- [Home page](https://vuecomponent.github.io/ant-design/)
44+
- [Vue](https://vuejs.org/)
4545
- [Ant Design React](http://ant.design/)
4646

antd-tools/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function compile (modules) {
129129
return merge2([less, jsFilesStream, assets])
130130
}
131131

132-
gulp.task('dist', (done) => {
132+
gulp.task('dist', ['compile'], (done) => {
133133
dist(done)
134134
})
135135
gulp.task('compile', ['compile-with-es'], () => {

docs/vue/getting-started.en-US.md

Lines changed: 34 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,80 @@
11

22
# Getting Started
33

4-
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.
4+
Ant Design Vue is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
55

6-
> 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.
6+
> Before delving into Ant Design Vue, a good knowledge base of [Vue](https://cn.vuejs.org/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
77
88

99
## Playground
1010

1111
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.
1212

13-
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
13+
- [![Vue Antd Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2wpk21kzvr)
1414

15-
## First Local Development
16-
17-
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.
15+
## Import vue-antd-ui
1816

1917
### 1. Installation
2018

21-
[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.
19+
[vue-cli](https://github.com/vuejs/vue-cli)
2220

2321
```bash
24-
$ npm install antd-init -g
22+
$ npm install vue-cli -g
2523
```
2624

27-
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.
28-
29-
> Also, you can try other scaffolds which is provided below:
30-
>
31-
> - [Ant Design Pro](http://pro.ant.design/)
32-
> - [antd-admin](https://github.com/zuiidea/antd-admin)
33-
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
34-
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
35-
> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
36-
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
37-
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
38-
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
39-
> - more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
40-
4125
### 2. Create a New Project
4226

4327
A new project can be created using CLI tools.
4428

4529
```bash
46-
$ mkdir antd-demo && cd antd-demo
47-
$ antd-init
30+
$ vue init webpack antd-demo
4831
```
4932

50-
`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
51-
5233
### 3. Use antd's Components
5334

54-
By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
55-
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`.
5635

57-
Replace the content of `index.js` with the following code.
58-
As you can see, there is no difference between antd's components and usual React components.
59-
60-
```jsx
61-
import React from 'react';
62-
import ReactDOM from 'react-dom';
63-
import { LocaleProvider, DatePicker, message } from 'antd';
64-
// The default locale is en-US, but we can change it to other language
65-
import frFR from 'antd/lib/locale-provider/fr_FR';
66-
import moment from 'moment';
67-
import 'moment/locale/fr';
68-
69-
moment.locale('fr');
70-
71-
class App extends React.Component {
72-
constructor(props) {
73-
super(props);
74-
this.state = {
75-
date: '',
76-
};
77-
}
78-
handleChange(date) {
79-
message.info('Selected Date: ' + date.toString());
80-
this.setState({ date });
81-
}
82-
render() {
83-
return (
84-
<LocaleProvider locale={frFR}>
85-
<div style={{ width: 400, margin: '100px auto' }}>
86-
<DatePicker onChange={value => this.handleChange(value)} />
87-
<div style={{ marginTop: 20 }}>Date: {this.state.date.toString()}</div>
88-
</div>
89-
</LocaleProvider>
90-
);
91-
}
92-
}
93-
94-
ReactDOM.render(<App />, document.getElementById('root'));
36+
```bash
37+
$ npm i --save vue-antd-ui
9538
```
9639

97-
> All the components in antd are listed in the sidebar.
40+
```jsx
41+
import Vue from 'vue'
42+
import { Button, message } from 'vue-antd-ui'
43+
import App from './App'
9844

99-
### 4. Development & Debugging
45+
Vue.config.productionTip = false
10046

101-
Run your project and visit http://127.0.0.1:8000
47+
Vue.component(Button.name, Button)
48+
Vue.prototype.$message = message
10249

103-
```bash
104-
$ npm start
50+
/* eslint-disable no-new */
51+
new Vue({
52+
el: '#app',
53+
components: { App },
54+
template: '<App/>'
55+
})
10556
```
10657

107-
### 5. Building & Deployment
108-
109-
```bash
110-
$ npm run build
111-
```
58+
> All the components in antd are listed in the sidebar.
11259
113-
Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
60+
### 4. Component list
11461

115-
> 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.
116-
> But you can use those tools in your project, depending on your context and needs.
62+
[Component list](https://github.com/vueComponent/ant-design/blob/master/site/components.js)
11763

11864
## Compatibility
11965

120-
Ant Design React supports all the modern browsers and IE9+.
66+
Ant Design Vue supports all the modern browsers and IE9+.
12167

12268
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.
12369

12470
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.
12571

12672
> Please avoid using both the babel and shim methods at the same time.
12773
128-
> 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.
129-
130-
```html
131-
<!DOCTYPE html>
132-
<html>
133-
<head>
134-
<meta charset="utf-8">
135-
<!-- import stylesheet -->
136-
<link rel="stylesheet" href="/index.css">
137-
<!-- Polyfills -->
138-
<!--[if lt IE 10]>
139-
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
140-
<![endif]-->
141-
<script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
142-
</head>
143-
<body>
144-
</body>
145-
<!-- import common dependencies -->
146-
<script src="/common.js"></script>
147-
<!-- import entry file -->
148-
<script src="/index.js"></script>
149-
</html>
150-
```
151-
152-
#### IE8 note
153-
154-
> We don't support IE8 after `[email protected]`.
155-
156-
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 `[email protected]` 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).
157-
158-
> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
159-
160-
## Customized Work Flow
161-
162-
If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code.
163-
164-
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).
165-
166-
If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd).
167-
168-
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.
169-
17074

17175
## Import on Demand
17276

173-
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.
77+
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'vue-antd-ui';`. This will affect your app's network performance.
17478

17579
```
17680
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
@@ -181,26 +85,27 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/
18185
However, we can import individual components on demand:
18286

18387
```jsx
184-
import Button from 'antd/lib/button';
185-
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
88+
import Button from 'vue-antd-ui/lib/button';
89+
import 'vue-antd-ui/lib/button/style'; // or vue-antd-ui/lib/button/style/css for css format file
18690
```
18791

18892
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:
18993

19094
```jsx
191-
import { Button } from 'antd';
95+
import { Button } from 'vue-antd-ui';
19296
```
19397

19498
And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
19599

196-
> 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.
100+
> 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 'vue-antd-ui/dist/antd.css'` and override the global reset styles.
197101
198102
## Customization
199103

200-
- [Customize Theme](/docs/react/customize-theme)
104+
- [Customize Theme](/ant-design/docs/vue/customize-theme)
201105
- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
202106

203107
## Tips
204108

205109
- You can use any `npm` modules.
206-
- 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.
110+
- Although Vue's official recommended template to write components, JSX is a better choice for complex components.
111+

0 commit comments

Comments
 (0)