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