## 安裝 ### 使用 npm 或 yarn 安裝 我們推薦使用 npm 或 yarn 的方式進行開發，不僅可在開發環境輕松調試，也可放心地在生產環境打包部署使用，享受整個生態圈和工具鏈帶來的諸多好處。 ~~~ $ npm install antd --save $ yarn add antd ~~~ 如果你的網絡環境不佳，推薦使用 **cnpm**。 ### 瀏覽器引入 在瀏覽器中使用 script 和 link 標簽直接引入文件，并使用全局變量 antd。 我們在 npm 發布包內的 antd/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通過 [CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square) 或 UNPKG 進行下載。 >強烈不推薦使用已構建文件，這樣無法按需加載，而且難以獲得底層依賴模塊的 bug 快速修復支持。 注意：3.0 之后引入 antd.js 前你需要自行引入 moment。 示例# ~~~ import { DatePicker } from 'antd'; ReactDOM.render(<DatePicker />, mountNode); ~~~ 引入樣式： `import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'` ## 按需加載 下面兩種方式都可以只加載用到的組件。 ### 使用 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 ~~~ ~~~ 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')); ~~~