快捷導(dǎo)航

Ant Design組件庫的使用教程

更新時(shí)間：2023年12月15日 11:10:47 作者：小小白學(xué)計(jì)算機(jī)

AntDesign ,簡稱antd是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫,主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品,這篇文章主要介紹了Ant Design組件庫的使用教程,需要的朋友可以參考下

一、AntDesign的介紹

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

中后臺(tái)的產(chǎn)品屬于工具性產(chǎn)品，很多優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)通過自身的探索和積累，形成了自己的設(shè)計(jì)體系。

AntDesign的特點(diǎn)：

提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。
開箱即用的高質(zhì)量 React 組件。
使用 TypeScript 開發(fā)，提供完整的類型定義文件。
全鏈路開發(fā)和設(shè)計(jì)工具體系。
數(shù)十個(gè)國際化語言支持。
深入每個(gè)細(xì)節(jié)的主題定制能力。

全鏈路開發(fā)和設(shè)計(jì)指的是什么？

全鏈路這個(gè)詞我記得是16年左右阿里提出的；
從業(yè)務(wù)戰(zhàn)略—用戶場(chǎng)景—設(shè)計(jì)目標(biāo)—交互體驗(yàn)—用戶流程—預(yù)期效率全方面進(jìn)行分析和考慮；
這個(gè)主要是產(chǎn)品經(jīng)理會(huì)考慮的一個(gè)點(diǎn)；

二、AntDesign兼容性

AntDesign的兼容性：

現(xiàn)代瀏覽器和 IE11（需要 polyfills）。
支持服務(wù)端渲染。
Electron

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

三、AntDesign的安裝

AntDesign:https://ant.design/index-cn/

使用 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>
                        <Button
                            type="primary"
                            icon={<PoweroffOutlined />}
                            loading={loadings[1]}
                            onClick={() => this.enterLoading(1)}
                        >
                            Click me!
                        </Button>
                        <Button
                            type="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.state
        let isBar = true
        const errClass = 'error'
        const warnClass = null
    return (
        <div>
          {/!*  原生React中添加class的方法  *!/}
          <h2 className={'foo bar active title'}>我是標(biāo)題1</h2>
          <h2 className={'title ' + (isActive ? 'active' : '')}>我是標(biāo)題2</h2>
          <h2 className={['title', (isActive ? 'active' : '')].join(" ")}>我是標(biāo)題3</h2>
          {/!*  使用classnames庫動(dòng)態(tài)添加class  *!/}
            <h2 className={'foo bar active title'}>我是標(biāo)題4</h2>
          <h2 className={classNames('foo', 'bar', 'active', 'title')}>我是標(biāo)題5</h2>
          <h2 className={classNames({'active': isActive, 'bar': isBar}, 'title')}>我是標(biāo)題6</h2>
          <h2 className={classNames('foo', errClass, warnClass, {'active': isActive})}>我是標(biāo)題7</h2>
          <h2 className={classNames(['active', 'title'])}>我是標(biāo)題8</h2>
          <h2 className={classNames(['active', 'title'], {'bar': isBar})}>我是標(biāo)題9</h2>
        </div>
    );
  }
}*/

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

antd 官網(wǎng)有提到：antd 的 JS 代碼默認(rèn)支持基于 ES modules 的 tree shaking，對(duì)于 js 部分，直接引入 import { Button } from ‘antd’ 就會(huì)有按需加載的效果。

四、認(rèn)識(shí)craco

上面的使用過程是無法對(duì)主題進(jìn)行配置的，好像對(duì)主題等相關(guān)的高級(jí)特性進(jìn)行配置，需要修改create-react-app 的默認(rèn)配置。

如何修改create-react-app 的默認(rèn)配置呢？

前面我們講過，可以通過yarn run eject來暴露出來對(duì)應(yīng)的配置信息進(jìn)行修改；
但是對(duì)于webpack并不熟悉的人來說，直接修改 CRA 的配置是否會(huì)給你的項(xiàng)目帶來負(fù)擔(dān)，甚至?xí)黾禹?xiàng)目的隱患和不穩(wěn)定性呢？
所以，在項(xiàng)目開發(fā)中是不建議大家直接去修改 CRA 的配置信息的；

那么如何來進(jìn)行修改默認(rèn)配置呢？社區(qū)目前有兩個(gè)比較常見的方案：