React+Antd5.0王者归来,后台管理系统构建指南

2023-12-28 08:27:02

项目初始化

在开始之前，确保已安装Node.js和npm。

使用create-react-app脚手架创建新项目：

npx create-react-app my-admin-system --template cra-template-preset-env

进入项目目录并安装Ant Design 5.0及所需依赖包：

cd my-admin-system
npm install antd@latest @ant-design/icons sass craco

配置craco，以覆盖React默认的webpack配置。这样可以实现对样式处理和按需加载组件的支持。

安装react-app-rewired插件：
```
npm install react-app-rewired --save-dev
```
修改项目根目录下的package.json，替换启动命令为使用craco的版本：
```
"scripts": {
  ...
  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
}
```

样式处理

为了支持Sass，在项目中创建src/styles/global.scss文件，并在此文件中引入Ant Design的主题样式。

配置craco以识别和编译Sass。编辑或创建一个名为craco.config.js的文件，内容如下：

const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {}
    }
  ],
  style: {
    sass: {
      loaderOptions: {
        additionalData: `@import "./src/styles/global.scss";`
      },
      implementation: require('sass')
    }
  }
};

Ant Design 5.0配置

安装babel-plugin-import插件来按需加载Ant Design组件，减少打包大小：
```
npm install babel-plugin-import --save-dev
```
修改.babelrc文件以包含新的Babel插件设置，如果不存在则创建该文件。
```
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}
```

在项目的入口文件中（如App.js），可以这样使用Ant Design组件：

import React from 'react';
import { Layout, Menu } from 'antd';

const App = () => {
  return (
    <Layout>
      <Menu theme="dark" mode="horizontal">
        <Menu.Item key="1">首页</Menu.Item>
        <Menu.Item key="2">产品列表</Menu.Item>
        <Menu.Item key="3">关于我们</Menu.Item>
      </Menu>
    </Layout>
  );
};

export default App;