mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

📝 Renew some documentations for state of art

Browse Source
This commit is contained in:
afc163 2019-01-22 19:06:11 +08:00 committed by 偏右
parent 7faae1ada5
commit 2569097a0f
6 changed files with 142 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README-zh_CN.md
View File

@ -52,6 +52,10 @@
npm install antd --save
```
```bash
yarn add antd
```
## 🔨 示例
```jsx

4
README.md
View File

@ -52,6 +52,10 @@ English | [简体中文](./README-zh_CN.md)
npm install antd --save
```
```bash
yarn add antd
```
## 🔨 Usage
```jsx

203
docs/react/getting-started.en-US.md
View File

@ -5,156 +5,117 @@ title: 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/)(> 8.0.0) 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.
> Before delving into Ant Design React, a good knowledge base of [React](https://reactjs.org) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
---
## Playground
## First Example
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.
There is the simplest example to show usage of Ant Design React.
<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=12" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
## First Local Development
### 1. Create one codesandbox
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.
Visit http://u.ant.design/ to create a codesandbox, don't forget to press save button.
### 1. Installation
### 2. Using antd component
[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [create-umi](https://github.com/umijs/create-umi) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation.
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.
```bash
$ npm install antd-init -g
```jsx
import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, message } from "antd";
import "antd/dist/antd.css";
import "./index.css";
class App extends React.Component {
state = {
date: null,
};
handleChange = date => {
message.info(`Selected Date: ${date.format("YYYY-MM-DD")}`);
this.setState({ date });
};
render() {
const { date } = this.state;
return (
<div style={{ width: 400, margin: "100px auto" }}>
<DatePicker onChange={this.handleChange} />
<div style={{ marginTop: 20 }}>
Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
```
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.
### 3. Explore in more components
Also, you can try other scaffolds provided below:
You can look up compnents in side menu, find one like [Alert](/components/alert). Plenty of examples are provided in component page,
API documentation too.
Click the corner icon at first example, there are source codes to use out of box. Now you are try import `Alert` in previous codesandbox:
```diff
- import { DatePicker, message } from 'antd';
+ import { DatePicker, message, Alert } from 'antd';
```
Add jsx part in `render` function.
```diff
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>
- Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
+ <Alert message={`Selected Date: ${date ? date.format('YYYY-MM-DD') : 'None'}`} type="success" />
</div>
```
Then you can see the result at preview section.
<img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/QjCr7oLcpT/c7ce72d2-601e-4130-a33b-456d4652bb2d.png" alt="codesandbox screenshot" />
OK! Now you know how to use antd components in a clear way, welcome to explore more usages in this codesandbox.
We also strongly recommend to use codesandbox to provide a reproducible demo while reporting a bug.
### 4. Next Step
In real world you gonna need a whole package of `compile/build/deploy/lint/debug` development workflow
which you can read ariticles afterwards or try other scaffolds provided below:
- [Ant Design Pro](http://pro.ant.design/)
- [antd-admin](https://github.com/zuiidea/antd-admin)
- [d2-admin](https://github.com/d2-projects/d2-admin)
- 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 ? date.toString() : ''));
this.setState({ date });
}
render() {
return (
<LocaleProvider locale={frFR}>
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>Date: {this.state.date && this.state.date.toString()}</div>
</div>
</LocaleProvider>
);
}
}
ReactDOM.render(<App />, 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.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
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.
We offset very limit support for IE9/10, some styles and animation would be mininal under them, also we are using Flex layout in few components.
> Please avoid using both the babel and shim methods at the same time.
> Note, different with Ant Design, Ant Design Pro support to IE11+.
> 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.
Polyfills are needed for IE browsers, we recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/).
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- import stylesheet -->
<link rel="stylesheet" href="/index.css">
<!-- Polyfills -->
<!--[if lt IE 10]>
<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>
<![endif]-->
<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>
</head>
<body>
</body>
<!-- import common dependencies -->
<script src="/common.js"></script>
<!-- import entry file -->
<script src="/index.js"></script>
</html>
```
Ant Design 3.0 support both React 15 and 16 now though, we strongly suggest React 16 for better performance and few bugs.
#### 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.
@ -165,7 +126,6 @@ If you are trying [parcel](https://parceljs.org), here is [a demo repository](ht
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.
@ -199,8 +159,3 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/
- [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.

151
docs/react/getting-started.zh-CN.md
View File

@ -5,55 +5,22 @@ title: 快速上手
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。
> 在开始之前，推荐先学习 [React](http://reactjs.org) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。
> 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。
---
## 在线演示
## 第一个例子
最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
这是一个最简单的 Ant Design 组件的在线演示。
<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=12" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
## 第一个本地实例
### 1. 创建一个 codesandbox
实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
访问 http://u.ant.design/ 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。
### 1. 安装脚手架工具
[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [create-umi](https://github.com/umijs/create-umi) 或 [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)
- [d2-admin](https://github.com/d2-projects/d2-admin)
- 更多脚手架可以查看 [脚手架市场](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 上手示例），先不管它，我们用来测试组件。
### 2. 使用组件
直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
@ -65,26 +32,29 @@ import { LocaleProvider, DatePicker, message } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import "antd/dist/antd.css";
import "./index.css";
moment.locale('zh-cn');
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
handleChange(date) {
message.info('您选择的日期是: ' + (date ? date.toString() : ''));
state = {
date: null,
};
handleChange = (date) => {
message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`);
this.setState({ date });
}
render() {
const { date } = this.state;
return (
<LocaleProvider locale={zhCN}>
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
<DatePicker onChange={this.handleChange} />
<div style={{ marginTop: 20 }}>
当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
</div>
</div>
</LocaleProvider>
);
@ -94,70 +64,64 @@ class App extends React.Component {
ReactDOM.render(<App />, document.getElementById('root'));
```
> 你可以在左侧菜单选用更多组件。
### 3. 探索更多组件用法
### 4. 开发调试
你可以在左侧菜单查看组件列表，比如 [Alert](/components/alert-cn) 组件，组件文档中提供了各类演示，最下方有组件 API 文档可以查阅。
在代码演示部分找到第一个例子，点击右下角的图标展开代码。
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
然后依照演示代码的写法，在之前的 codesandbox 里修改 `index.js`，首先在 `import` 内引入 Alert 组件：
```bash
$ npm start
```diff
- import { LocaleProvider, DatePicker, message } from 'antd';
+ import { LocaleProvider, DatePicker, message, Alert } from 'antd';
```
### 5. 构建和部署
然后在 `render` 内添加相应的 jsx 代码：
```bash
$ npm run build
```diff
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>
- 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
+ <Alert message={`当前日期：${date ? date.format('YYYY-MM-DD') : '未选择'}`} type="success" />
</div>
```
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
在右侧预览区就可以看到如图的效果。
> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
<img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/Up3%24VYhN0S/134614ee-7440-46f1-a797-fa6f6b3e300f.png" alt="codesandbox screenshot" />
好的，现在你已经会使用基本的 antd 组件了，你可以在这个例子中继续探索其他组件的用法。
如果你遇到组件的 bug，也推荐建一个可重现的 codesandbox 来报告 bug。
### 4. 下一步
实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例：
- [Ant Design Pro](http://pro.ant.design/)
- [antd-admin](https://github.com/zuiidea/antd-admin)
- [d2-admin](https://github.com/d2-projects/d2-admin)
- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
## 兼容性
Ant Design React 支持所有的现代浏览器和 IE9+。
对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。
> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题
> 注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。
> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。
对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="/index.css">
<!-- Polyfills -->
<!--[if lt IE 10]>
<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>
<![endif]-->
<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>
</head>
<body>
</body>
<!-- 引入公用文件 -->
<script src="/common.js"></script>
<!-- 引入入口文件 -->
<script src="/index.js"></script>
</html>
```
Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。
#### IE8 note
> `antd@2.0` 之后将不再支持 IE8。
IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。
> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8
## 自行构建
如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。
@ -199,8 +163,3 @@ import { Button } from 'antd';
- [改变主题](/docs/react/customize-theme)
- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
## 小贴士
- 你可以享用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。

9
docs/spec/download.en-US.md
View File

@ -79,15 +79,6 @@ Please find below some of the design resources and tools about Ant Design that w
<span class="resource-card-description">A series prototypes that help creating application structure and user flow</span>
</div>
</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
<div class="resource-card-icon">
<img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
</div>
<div class="resource-card-content">
<span class="resource-card-title">Web Font</span>
<span class="resource-card-description">Icon font package for your local reference</span>
</div>
</a>
<a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
<div class="resource-card-icon">
<img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">

9
docs/spec/download.zh-CN.md
View File

@ -81,15 +81,6 @@ title: 设计资源
<span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
</div>
</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
<div class="resource-card-icon">
<img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
</div>
<div class="resource-card-content">
<span class="resource-card-title">Web Font</span>
<span class="resource-card-description">网络字体图标的本地文件包</span>
</div>
</a>
<a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
<div class="resource-card-icon">
<img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">