一、安裝使用
1.1、安裝
推薦使用 npm 或 yarn 的方式進行開發
npm install antd --save
yarn add antd
1.2、瀏覽器引入
在瀏覽器中使用 script
和 link
標簽直接引入文件,並使用全局變量 antd
。
我們在 npm 發布包內的 antd/dist
目錄下提供了 antd.js
antd.css
以及 antd.min.js
antd.min.css
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
引入樣式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
1.3、按需加載
方式一、使用 babel-plugin-import(推薦)。
// .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 會加載 less 文件 ] }
注意:webpack 1 無需設置
libraryDirectory
。
然后只需從 antd 引入模塊即可,無需單獨引入樣式。等同於下面手動引入的方式。
// babel-plugin-import 會幫助你加載 JS 和 CSS import { DatePicker } from 'antd';
方式二、手動引入
import DatePicker from 'antd/lib/date-picker'; // 加載 JS import 'antd/lib/date-picker/style/css'; // 加載 CSS // import 'antd/lib/date-picker/style'; // 加載 LESS
二、快速入門
2.1、安裝腳手架工具
antd-init 是一個用於演示 antd 如何使用的腳手架工具,實際業務項目建議使用 dva-cli 和 create-react-app 進行搭建。
npm install antd-init -g
2.2、創建一個項目
mkdir antd-demo && cd antd-demo
antd-init
2.3、使用組件
直接用下面的代碼替換 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 ? 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 && this.state.date.toString()}</div> </div> </LocaleProvider> ); } } ReactDOM.render(<App />, document.getElementById('root'));
你可以在左側菜單選用更多組件。
2.4、開發調試
一鍵啟動調試,訪問 http://127.0.0.1:8000 查看效果。
npm start
2.5、構建和部署
npm run build
三、按需加載
如果你在開發環境的控制台看到下面的提示,那么你可能使用了 import { Button } from 'antd';
的寫法引入了 antd 下所有的模塊,這會影響應用的網絡性能。
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
可以通過以下的寫法來按需加載組件。
import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加載 css 文件
如果你使用了 babel,那么可以使用 babel-plugin-import 來進行按需加載,加入這個插件后。你可以仍然這么寫:
import { Button } from 'antd';
插件會幫你轉換成 antd/lib/xxx
的寫法。另外此插件配合 style 屬性可以做到模塊樣式的按需自動加載。
注意,babel-plugin-import 的
style
屬性除了引入對應組件的樣式,也會引入一些必要的全局樣式。如果你不需要它們,建議不要使用此屬性。你可以import 'antd/dist/antd.css
手動引入,並覆蓋全局樣式。