一、AntDesign的介紹

AntDesign ，簡稱 antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。

• 中后臺的產品 屬于工具性產品，很多優秀的設計團隊通過自身的探索和積累，形成了自己的設計體系。

AntDesign的特點：

• 提煉自企業級中后臺產品的交互語言和視覺風格。
• 開箱即用的高質量 React 組件。
• 使用 TypeScript 開發，提供完整的類型定義文件。
• 全鏈路開發和設計工具體系。
• 數十個國際化語言支持。
• 深入每個細節的主題定制能力。

全鏈路開發和設計指的是什么？

• 全鏈路這個詞我記得是16年左右阿里提出的；
• 從業務戰略—用戶場景—設計目標—交互體驗—用戶流程—預期效率全方面進行分析和考慮；
• 這個主要是產品經理會考慮的一個點；

二、AntDesign兼容性

AntDesign的兼容性：

• 現代瀏覽器和 IE11（需要 polyfills）。
• 支持服務端渲染。
• Electron

antd@2.0 之后不再支持 IE8，antd@4.0 之后不再支持 IE9/10。
目前穩定的版本：v4.4.0

三、AntDesign的安裝

使用 npm 或 yarn 安裝

npm install antd –save 或 yarn add antd

我們需要在index.js中引入全局的Antd樣式：

import "antd/dist/antd.css";

在App.js中就可以使用一些組件了：

import React, {PureComponent} from 'react'; import moment from 'moment' import {Button, Space, DatePicker} from 'antd' import { PoweroffOutlined } from '@ant-design/icons';function onChange(date, dateString) {console.log(date, dateString); }class App extends PureComponent {constructor(props) {super(props);this.state = {loadings: [],};}enterLoading = index => {this.setState(({ loadings }) => {const newLoadings = [...loadings];newLoadings[index] = true;return {loadings: newLoadings,};});setTimeout(() => {this.setState(({ loadings }) => {const newLoadings = [...loadings];newLoadings[index] = false;return {loadings: newLoadings,};});}, 6000);};render() {const { loadings } = this.state;return (<div><>{/*<Space style={{ width: '100%' }}><Button type="primary" loading>Loading</Button><Button type="primary" size="small" loading>Loading</Button><Button type="primary" icon={<PoweroffOutlined />} loading /></Space>*/}{/* <Space style={{ width: '100%' }}><Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>Click me!</Button><Buttontype="primary"icon={<PoweroffOutlined />}loading={loadings[1]}onClick={() => this.enterLoading(1)}>Click me!</Button><Buttontype="primary"icon={<PoweroffOutlined />}loading={loadings[2]}onClick={() => this.enterLoading(2)}/></Space>*/}<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>Click me!</Button><DatePicker defaultValue={moment('2018-06-12', 'YY-MM-DD')}onChange={onChange} picker="day"allowClear={false}/></></div>);} }export default App;/*class App extends PureComponent {constructor(props) {super(props);this.state = {isActive: true}}render() {const {isActive} = this.statelet isBar = trueconst errClass = 'error'const warnClass = nullreturn (<div>{/!* 原生React中添加class的方法 *!/}<h2 className={'foo bar active title'}>我是標題1</h2><h2 className={'title ' + (isActive ? 'active' : '')}>我是標題2</h2><h2 className={['title', (isActive ? 'active' : '')].join(" ")}>我是標題3</h2>{/!* 使用classnames庫動態添加class *!/}<h2 className={'foo bar active title'}>我是標題4</h2><h2 className={classNames('foo', 'bar', 'active', 'title')}>我是標題5</h2><h2 className={classNames({'active': isActive, 'bar': isBar}, 'title')}>我是標題6</h2><h2 className={classNames('foo', errClass, warnClass, {'active': isActive})}>我是標題7</h2><h2 className={classNames(['active', 'title'])}>我是標題8</h2><h2 className={classNames(['active', 'title'], {'bar': isBar})}>我是標題9</h2></div>);} }*/

考慮一個問題：Antd是否會將一些沒有用的代碼（組件或者邏輯代碼）引入，造成包很大呢？

• antd 官網有提到：antd 的 JS 代碼默認支持基于 ES modules 的 tree shaking，對于 js 部分，直接引入 import { Button } from ‘antd’ 就會有按需加載的效果。

四、認識craco

上面的使用過程是無法對主題進行配置的，好像對主題等相關的高級特性進行配置，需要修改create-react-app 的默認配置。

如何修改create-react-app 的默認配置呢？

• 前面我們講過，可以通過yarn run eject來暴露出來對應的配置信息進行修改；
• 但是對于webpack并不熟悉的人來說，直接修改 CRA 的配置是否會給你的項目帶來負擔，甚至會增加項目的隱患和不穩定 性呢？
• 所以，在項目開發中是不建議大家直接去修改 CRA 的配置信息的；

那么如何來進行修改默認配置呢？社區目前有兩個比較常見的方案：

• react-app-rewired + customize-cra；（這個是antd早期推薦的方案）
• craco；（目前antd推薦的方案）

五、Craco的使用步驟

官方文檔：https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE
第一步：安裝craco：

yarn add @craco/craco

第二步：修改package.json文件

• 原本啟動時，我們是通過react-scripts來管理的；
• 現在啟動時，我們通過craco來管理；
  

第三步：在根目錄下創建craco.config.js文件用于修改默認配置

六、配置主題

按照 配置主題 的要求，自定義主題需要用到類似 less-loader 提供的 less 變量覆蓋功能：

• 我們可以引入 craco-less 來幫助加載 less 樣式和修改變量；

安裝 craco-less：

yarn add craco-less

修改craco.config.js中的plugins：

• 使用modifyVars可以在運行時修改LESS變量；
  

引入antd的樣式時，引入antd.less文件：

import 'antd/dist/antd.less';

修改后重啟 yarn start，如果看到一個綠色的按鈕就說明配置成功了。

七、配置別名

在項目開發中，某些組件或者文件的層級會較深，

• 如果我們通過上層目錄去引入就會出現這樣的情況：…/…/…/…/components/button；
• 如果我們可以配置別名，就可以直接從根目錄下面開始查找文件：@/components/button，甚至是：components/button；

配置別名也需要修改webpack的配置，當然我們也可以借助于 craco 來完成：

在導入時就可以按照下面的方式來使用了：

總結

以上是生活随笔為你收集整理的AntDesign组件库的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。