antd-admin 项目教程

antd-admin 项目教程

antd-adminAn excellent front-end solution for enterprise applications built upon Ant Design and UmiJS项目地址:https://gitcode.com/gh_mirrors/an/antd-admin

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

antd-admin 项目的目录结构如下：

antd-admin/
├── assets/
├── docs/
├── mock/
├── public/
├── scripts/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── models/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   ├── app.js
│   ├── global.less
│   ├── router.js
│   └── theme.js
├── .editorconfig
├── .env
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .stylelintrc.json
├── .travis.yml
├── .umirc.js
├── LICENSE
├── README-zh_CN.md
├── README.md
├── jest.config.js
├── manifest.json
├── package.json

目录介绍

• assets/: 存放静态资源文件。
• docs/: 存放项目文档。
• mock/: 存放模拟数据文件。
• public/: 存放公共资源文件。
• scripts/: 存放脚本文件。
• src/: 存放源代码文件。
  • components/: 存放通用组件。
  • layouts/: 存放布局组件。
  • models/: 存放数据模型。
  • routes/: 存放路由配置。
  • services/: 存放服务接口。
  • utils/: 存放工具函数。
  • app.js: 应用入口文件。
  • global.less: 全局样式文件。
  • router.js: 路由配置文件。
  • theme.js: 主题配置文件。
• .editorconfig: 编辑器配置文件。
• .env: 环境变量配置文件。
• .eslintignore: ESLint 忽略配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略配置文件。
• .prettierignore: Prettier 忽略配置文件。
• .prettierrc: Prettier 配置文件。
• .stylelintrc.json: Stylelint 配置文件。
• .travis.yml: Travis CI 配置文件。
• .umirc.js: UmiJS 配置文件。
• LICENSE: 许可证文件。
• README-zh_CN.md: 中文 README 文件。
• README.md: README 文件。
• jest.config.js: Jest 配置文件。
• manifest.json: Web 应用清单文件。
• package.json: 项目依赖配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/app.js，该文件是应用的入口文件，负责初始化应用和配置全局设置。

// src/app.js
import { Provider } from 'react-redux';
import dva from 'dva';
import createHistory from 'history/createBrowserHistory';
import createLoading from 'dva-loading';
import models from './models';
import router from './router';

// 1. Initialize
const app = dva({
  history: createHistory(),
});

// 2. Plugins
app.use(createLoading());

// 3. Model
models.forEach(model => app.model(model));

// 4. Router
app.router(router);

// 5. Start
app.start('#root');

启动文件介绍

• Initialize: 初始化应用实例。
• Plugins: 添加插件，例如 dva-loading。
• Model: 注册数据模型。
• Router: 配置路由。
• Start: 启动应用。

3. 项目的配置文件介绍

项目的配置文件主要包括 .env 和 .umirc.js。

.env 文件

.env 文件用于配置环境变量，例如登录页面的账号和密码。

# .env
REACT_APP_USERNAME=admin
REACT_APP_PASSWORD=admin

.umirc.js 文件

.umirc.js 文件是 UmiJS 的配置文件，用于配置项目的路由

antd-adminAn excellent front-end solution for enterprise applications built upon Ant Design and UmiJS项目地址:https://gitcode.com/gh_mirrors/an/antd-admin