Ant Design React
安装
1. 安装脚手架工具#
antd-init 是一个用于演示 antd 如何使用的脚手架工具,真实项目建议使用 dva-cli。
$ npm install antd-init -g
除了官方提供的脚手架,您也可以使用社区提供的脚手架和范例:
2. 创建一个项目#
使用命令行进行初始化。
$ 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 组件。
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 start
5. 构建和部署#
$ 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 --save
3. 使用#
入口页面 (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