antd是蚂蚁集团旗下开发的一款优秀的前端UI框架，目前这个框架支持Vue和React。这个框架主要用于开发企业级的后台产品，如果想开发移动端应用的话可以选择Ionic。

1.安装

#npm安装
npm install antd --save
#yarn安装
yarn add antd

2.实例

项目结构图如下：

package.json

"devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/plugin-transform-runtime": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.18.3",
    "antd": "^4.21.6",
    "axios": "^0.27.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-redux": "^5.1.2",
    "react-router-dom": "^5.2.1",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.0"
  }

Classify/index.js

import React, { Component } from 'react'
import {Table, Space,  Button} from 'antd'

const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '操作',
      key: 'set',
      render: (text,record,index) => {
          return (
              <Space>
                  <Button type="primary" size="small">修改</Button>
                  <Button type="primary" size="small" danger onClick={()=>{
                      alert(index)
                  }}>删除</Button>
              </Space>
          )
      }
    }
  ];

  const data = [
    {
      key: '1',
      name: '男装'
    },
    {
      key: '2',
      name: '女装'
    },
    {
      key: '3',
      name: '玩具'
    }
  ];

export default class index extends Component {
    render() {
        return (
            <Table style={{width: '100%'}} columns={columns} dataSource={data} />
        )
    }
}

Goods/index.js

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            <div>
                商品管理
            </div>
        )
    }
}

User/index.js

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            <div>
                用户管理
            </div>
        )
    }
}

Login.js

import React, { Component } from 'react'

export default class Login extends Component {
    render() {
        return (
            <div>
                登录
            </div>
        )
    }
}

main.css

.trigger {
    padding: 0 24px;
    font-size: 18px;
    line-height: 64px;
    cursor: pointer;
    transition: color 0.3s;
  }
.trigger:hover {
    color: #1890ff;
  }
.logo {
    height: 32px;
    margin: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }

  .site-layout .site-layout-background {
    background: #fff;
    display: flex;
    justify-content: space-between;
  }

  .exit-btn{
      margin-right: 50px;
      cursor: pointer;
  }
  .exit-btn:hover{
      color: #37f;
  }

Main.js

import React, {Component} from 'react'
import {Layout, Menu, Table} from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    TaobaoOutlined
} from '@ant-design/icons';
import './main.css'
import {Link, Switch, Route} from 'react-router-dom';
import Classify from './Classify'
import Goods from './Goods'
import User from './User'

const {Header, Sider, Content} = Layout;

export default class Main extends Component {

    state = {
        collapsed: false
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }

    render() {
        // console.log(window.location.pathname)
        // console.log(this.props.location.pathname)
        return (
            <Layout style={{height: '100%'}}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo">
                        {
                            this.state.collapsed ?
                                <TaobaoOutlined style={{fontSize: '30px'}}/> :
                                <span>京西电商管理系统</span>
                        }
                    </div>

                    <Menu
                        mode="inline"
                        theme="dark"
                        style={{height: '100%', borderRight: 0}}
                        items={[
                            {
                                key: '1',
                                icon: <UserOutlined/>,
                                label: `分类管理`,
                                //当点击该标签， 跳转到Home
                                to: '/classify',
                                onClick: () => {
                                    this.props.history.push({pathname: '/classify'})
                                }

                            },
                            {
                                key: '2',
                                icon: <VideoCameraOutlined/>,
                                label: '商品管理',
                                to: '/goods',
                                onClick: () => {
                                    this.props.history.push({pathname: '/goods'})
                                }
                            },
                            {
                                key: '3',
                                icon: <UploadOutlined/>,
                                label: '用户管理',
                                to: '/user',
                                onClick: () => {
                                    this.props.history.push({pathname: '/user'})
                                }
                            },
                        ]}
                    />

                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{padding: 0}}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                        <span className="exit-btn" onClick={() => {
                            this.props.history.push({pathname: '/login'})
                        }}>退出</span>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Switch>
                            <Route path="/classify" component={Classify}/>
                            <Route path="/goods" component={Goods}/>
                            <Route path="/user" component={User}/>
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}

App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Login from './Login'
import Main from './Main'

export default function App() {
  return (
    <Switch>
      <Route path="/login" component={Login}/>
      <Route path="/" component={Main}/>
    </Switch>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
,document.getElementById('root'));

运行效果：