Skip to content

Commit 13df04e

Browse files
tangjinzhoutangjinzhou
committed
add docs
1 parent 1e4d422 commit 13df04e

16 files changed

+1566
-14
lines changed

‎README-zh_CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
2020

2121
- 提炼自企业级中后台产品的交互语言和视觉风格。
2222
- 开箱即用的高质量 Vue 组件。
23-
- 全链路开发和设计工具体系。
23+
- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
2424

2525
## 安装
2626

‎docs/vue/customize-theme.en-US.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
# Customize Theme
3+
4+
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.
5+
6+
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.
7+
8+
![](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
9+
10+
## Less variables
11+
12+
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.
13+
14+
- [Default Variables](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
15+
16+
Please report an issue if the existing list of variables is not enough for you.
17+
18+
## How to do it
19+
20+
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.
21+
22+
### 1) Using `theme` property (recommended way)
23+
24+
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:
25+
- example of directly specifying the custom values as an object:
26+
```js
27+
"theme": {
28+
"primary-color": "#1DA57A",
29+
},
30+
```
31+
32+
### 2) Overriding Less variables (alternative way)
33+
34+
Override variables via less definition files.
35+
36+
Create a standalone less file like the one below, and import it in your project.
37+
38+
```css
39+
@import "~vue-antd-ui/dist/antd.less"; // import official less entry file
40+
@import "your-theme-file.less"; // override variables here
41+
```
42+
43+
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
44+
45+
## Related Articles
46+
47+
- [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)
48+
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)

‎docs/vue/customize-theme.zh-CN.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
# 定制主题
3+
4+
vue-antd-ui的组件结构及样式和Antd React完全一致，你可以参考Antd React的定制方式进行配置。
5+
6+
Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
7+
8+
![](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
9+
10+
## 样式变量
11+
12+
antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
13+
14+
- [默认样式变量](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
15+
16+
如果以上变量不能满足你的定制需求，可以给我们提 issue。
17+
18+
## 定制方式
19+
20+
我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
21+
在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
22+
23+
24+
### 1) theme 属性（推荐）
25+
26+
配置在 `package.json` 或 `.webpackrc` 下的 `theme` 字段。theme 可以配置为一个对象或文件路径。
27+
28+
```js
29+
"theme": {
30+
"primary-color": "#1DA57A",
31+
},
32+
```
33+
34+
### 2) less
35+
36+
用 less 文件进行变量覆盖。
37+
38+
建立一个单独的 `less` 文件如下，再引入这个文件。
39+
40+
```css
41+
@import "~vue-antd-ui/dist/antd.less"; // 引入官方提供的 less 样式入口文件
42+
@import "your-theme-file.less"; // 用于覆盖上面定义的变量
43+
```
44+
45+
注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
46+
47+
## 社区教程 for Antd React
48+
49+
- [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)
50+
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)

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

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
2+
# Getting Started
3+
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.
5+
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.
7+
8+
9+
## Playground
10+
11+
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.
12+
13+
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
14+
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.
18+
19+
### 1. Installation
20+
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.
22+
23+
```bash
24+
$ npm install antd-init -g
25+
```
26+
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+
41+
### 2. Create a New Project
42+
43+
A new project can be created using CLI tools.
44+
45+
```bash
46+
$ mkdir antd-demo && cd antd-demo
47+
$ antd-init
48+
```
49+
50+
`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
51+
52+
### 3. Use antd's Components
53+
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`.
56+
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'));
95+
```
96+
97+
> All the components in antd are listed in the sidebar.
98+
99+
### 4. Development & Debugging
100+
101+
Run your project and visit http://127.0.0.1:8000
102+
103+
```bash
104+
$ npm start
105+
```
106+
107+
### 5. Building & Deployment
108+
109+
```bash
110+
$ npm run build
111+
```
112+
113+
Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
114+
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.
117+
118+
## Compatibility
119+
120+
Ant Design React supports all the modern browsers and IE9+.
121+
122+
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.
123+
124+
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.
125+
126+
> Please avoid using both the babel and shim methods at the same time.
127+
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+
170+
171+
## Import on Demand
172+
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.
174+
175+
```
176+
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
177+
```
178+
179+
> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png)
180+
181+
However, we can import individual components on demand:
182+
183+
```jsx
184+
import Button from 'antd/lib/button';
185+
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
186+
```
187+
188+
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:
189+
190+
```jsx
191+
import { Button } from 'antd';
192+
```
193+
194+
And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
195+
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.
197+
198+
## Customization
199+
200+
- [Customize Theme](/docs/react/customize-theme)
201+
- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
202+
203+
## Tips
204+
205+
- 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.

0 commit comments

Comments
 (0)