快速開始 Ant Design of React

antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。

? 特性

• ?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。

• ?? 開箱即用的高質(zhì)量 React 組件。

• ?? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。

• ?? 全鏈路開發(fā)和設計工具體系。

• ?? 數(shù)十個國際化語言支持。

• ?? 深入每個細節(jié)的主題定制能力。

支持環(huán)境

• 現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。

• 支持服務端渲染。

• Electron

官方文檔

• https://3x.ant.design/docs/react/introduce-cn

安裝

使用 npm 或 yarn 安裝

我們推薦使用 npm 或 yarn 的方式進行開發(fā)，不僅可在開發(fā)環(huán)境輕松調(diào)試，也可放心地在生產(chǎn)環(huán)境打包部署使用，享受整個生態(tài)圈和工具鏈帶來的諸多好處。

$ npm install antd --save

$ yarn add antd

如果你的網(wǎng)絡環(huán)境不佳，推薦使用 cnpm。

瀏覽器引入

在瀏覽器中使用 script 和 link 標簽直接引入文件，并使用全局變量 antd。

我們在 npm 發(fā)布包內(nèi)的 antd/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通過 ， 或 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'

按需加載

注意：antd 默認支持基于 ES module 的 tree shaking，不使用以下插件也會有按需加載的效果。

下面兩種方式都可以只加載用到的組件。

• 使用 babel-plugin-import（推薦）。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // `style: true` 會加載 less 文件
      }]
    ]
  }

  然后只需從 antd 引入模塊即可，無需單獨引入樣式。等同于下面手動引入的方式。

  // babel-plugin-import 會幫助你加載 JS 和 CSS
  import { DatePicker } from 'antd';

• 手動引入

  import DatePicker from 'antd/es/date-picker'; // 加載 JS
  import 'antd/es/date-picker/style/css'; // 加載 CSS
  // import 'antd/es/date-picker/style';         // 加載 LESS