React Antd Admin 项目教程

1. 项目的目录结构及介绍

react-antd-admin/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── services/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── README.zh_CN.md
├── package.json
├── tsconfig.json
├── vercel.json
├── vite.config.ts
└── yarn.lock

目录结构介绍

• public/: 包含项目的静态文件，如 index.html。
• src/: 项目的源代码目录，包含以下子目录：
  • assets/: 静态资源文件，如图片、字体等。
  • components/: 项目中使用的组件。
  • layouts/: 页面布局组件。
  • pages/: 页面组件。
  • services/: 数据请求服务。
  • store/: 状态管理文件。
  • styles/: 样式文件。
  • utils/: 工具函数。
  • App.tsx: 应用的根组件。
  • index.tsx: 项目的入口文件。
• 其他文件和目录：
  • .editorconfig, .eslintignore, .eslintrc.js, .gitignore, .prettierrc: 配置文件。
  • LICENSE: 项目许可证。
  • README.md, README.zh_CN.md: 项目说明文档。
  • package.json: 项目依赖和脚本配置。
  • tsconfig.json: TypeScript 配置文件。
  • vercel.json: Vercel 部署配置文件。
  • vite.config.ts: Vite 配置文件。
  • yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

入口文件 index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

• index.tsx 是项目的入口文件，负责渲染根组件 App 到 index.html 中的 root 元素。
• ReactDOM.render 方法用于将 React 组件渲染到 DOM 中。
• reportWebVitals 用于性能监控。

根组件 App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import routes from './routes';

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={route.component}
            />
          ))}
        </Switch>
      </Router>
    </Provider>
  );
};

export default App;

• App.tsx 是项目的根组件，负责路由配置和状态管理。
• 使用 react-router-dom 进行路由管理。
• 使用 react-redux 进行状态管理。

3. 项目的配置文件介绍

package.json

{
  "name": "react-antd-admin",
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "build": "v