《React-Antd-Admin项目启动与配置教程》

《React-Antd-Admin项目启动与配置教程》

react-antd-admin 基于vite2.x + react17.x + typescript4.x + antd4.x + react-router6.x + mobx6.x编写的一款简单高效的前后端分离的权限管理系统 项目地址: https://gitcode.com/gh_mirrors/reactantdadmi/react-antd-admin

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

react-antd-admin 是一个基于 React 和 Ant Design 的后台管理模板。以下是项目的目录结构及各部分的简要介绍：

react-antd-admin/
├── public/                    # 公共文件，如index.html
│   ├── index.html             # 页面入口
│   └── ...
├── src/                       # 源代码目录
│   ├── assets/                # 静态资源，如图片、样式文件
│   ├── components/            # 通用组件
│   ├── layouts/              # 页面布局组件
│   ├── models/                # dva 的 models
│   ├── pages/                 # 页面组件
│   ├── services/              # 数据请求服务
│   ├── utils/                 # 工具函数
│   ├── app.js                 # 应用入口
│   ├── global.js              # 全局样式和初始化配置
│   └── ...
├── .gitignore                 # git忽略文件
├── .eslintrc.js               # ESLint 配置文件
├── .prettierrc                # Prettier 配置文件
├── package.json               # 项目依赖和配置
├── package-lock.json          # 项目依赖锁定文件
└── ...

2. 项目的启动文件介绍

项目的启动文件位于 src/app.js，以下是该文件的主要内容：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { Provider } from 'dva';
import models from './models';
import App from './layouts/App';
import './global.less';

function AppMain() {
  const app = dva({
    models: models,
  });

  return (
    <Provider store={app._store}>
      <ConfigProvider locale={zhCN}>
        <Router>
          <App />
        </Router>
      </ConfigProvider>
    </Provider>
  );
}

export default AppMain;

该文件主要做了以下事情：

• 使用 React Router 设置了路由。
• 使用 dva 作为状态管理库，并加载了模型。
• 使用 Ant Design 的 ConfigProvider 来配置语言为中文。
• 设置了应用的根组件 App。

3. 项目的配置文件介绍

项目的配置文件主要包括 .eslintrc.js 和 .prettierrc。

.eslintrc.js

ESLint 配置文件用于指定代码风格和语法规则，以下是配置文件的主要内容：

module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react'],
  rules: {
    // 在这里添加自定义规则
  },
};

.prettierrc

Prettier 配置文件用于统一代码格式，以下是配置文件的内容：

{
  "semi": false,
  "singleQuote": true
}

这表示代码中不自动添加分号，并使用单引号代替双引号。

react-antd-admin 基于vite2.x + react17.x + typescript4.x + antd4.x + react-router6.x + mobx6.x编写的一款简单高效的前后端分离的权限管理系统 项目地址: https://gitcode.com/gh_mirrors/reactantdadmi/react-antd-admin