Ant Design React
安装
1. 安装脚手架工具#
antd-init 是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用 dva-cli。
$ npm install antd-init -g除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：
2. 创建一个项目#
使用命令行进行初始化。
$ mkdir antd-demo && cd antd-demo
$ antd-initantd-init 会自动安装 npm 依赖，若有问题则可自行安装。
若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。
3. 使用组件#
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
直接用下面的代码替换 index.js 的内容，用 React 的方式直接使用 antd 组件。
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 (
<LocaleProvider locale={zhCN}>
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
</div>
</LocaleProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));你可以在左侧菜单选用更多组件。
4. 开发调试#
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
$ npm start5. 构建和部署#
$ npm run build入口文件会构建到 dist 目录中，你可以自由部署到不同环境中进行引用。
Ant Design Pro安装#
有两种方式进行安装：
直接 clone git 仓库#
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project使用命令行工具#
你可以使用集成化的命令行工具 ant-design-pro-cli。
$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new # 安装脚手架目录结构#
我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。
├── mock # 本地模拟数据
├── public
│ └── favicon.ico # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── common # 应用公用配置，如导航信息
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # dva model
│ ├── routes # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── g2.js # 可视化图形配置
│ ├── theme.js # 主题配置
│ ├── index.ejs # HTML 入口模板
│ ├── index.js # 应用入口
│ ├── index.less # 全局样式
│ └── router.js # 路由入口
├── tests # 测试工具
├── README.md
└── package.json本地开发#
安装依赖。
$ npm install如果网络状况不佳，可以使用 cnpm 进行加速。
$ npm start
启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。
1. 创建一个项目#
可以是已有项目，或者是使用 dva / create-react(-native)-app 新创建的空项目，你也可以从 官方示例 脚手架里拷贝并修改
2. 安装#
$ npm install antd-mobile --save3. 使用#
入口页面 (html 或 模板) 相关设置：
引入 FastClick 并且设置 html
meta(更多参考 #576)引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)
<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body></body>
</html>组件使用实例：
import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);引入样式：
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'按需加载#
注意：强烈推荐使用。
下面两种方式都可以只加载用到的组件，选择其中一种方式即可。
-
使用 babel-plugin-import（推荐）。
// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件 ] }然后只需从 antd-mobile 引入模块即可，无需单独引入样式。
// babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd-mobile'; -
手动引入
import DatePicker from 'antd-mobile/lib/date-picker'; // 加载 JS import 'antd-mobile/lib/date-picker/style/css'; // 加载 CSS // import 'antd-mobile/lib/date-picker/style'; // 加载 LESS
更多增强 (非必须):#
如何自定义主题？见此文档， 基于 antd-mobile 的自定义 UI 库：web-custom-ui / web-custom-ui-pro