dva-boot-admin 项目教程

dva-boot-admin 项目教程

dva-boot-admin :cake: react admin dashboard ui LANIF-ADMIN --- react 16 + react-router 4 + dva 2 + antd 4 后台管理 脚手架 项目地址: https://gitcode.com/gh_mirrors/dv/dva-boot-admin

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

├── public # 不参与编译的资源文件
├── templates # 为代码生成所准备的模板文件
├── src # 主程序目录
│   ├── index.js # 程序启动和渲染入口文件
│   ├── config.js # 全局配置
│   ├── components # 全局公共组件
│   ├── layouts # 页面结构组件
│   │   ├── BasicLayout # 基本布局
│   │   └── OtherLayout # 布局组件根据具体功能调整，在路由配置中引用
│   ├── routes # 动态路由目录（每个功能一个文件夹的MVC结构）
│   │   ├── index.js # 路由配置文件
│   │   ├── Home # 功能模块
│   │   │   ├── index.js # 路由配置文件
│   │   │   ├── assets # 单独属于这个模块的静态资源文件
│   │   │   ├── components # 页面组件
│   │   │   ├── model # dva model
│   │   │   ├── service # dva service
│   │   │   └── routes ** # 子路由(目录结构与父级相同)
│   │   └── Login # 功能模块
│   │       ├── index.js # 路由配置文件
│   │       ├── assets # 单独属于这个模块的静态资源文件
│   │       ├── components # 页面组件
│   │       ├── model # dva model
│   │       ├── service # dva service
│   │       └── routes ** # 子路由(目录结构与父级相同)
│   ├── utils # 工具类
│   └── assets # 资源文件
│       ├── fonts # 字体 & 字体图标
│       ├── images # 图片
│       └── styles # 全局样式

2. 项目的启动文件介绍

src/index.js

这是项目的启动和渲染入口文件。它负责初始化应用并渲染到指定的DOM节点上。通常包含以下内容：

• 引入全局样式和配置
• 初始化dva应用
• 渲染应用到指定的DOM节点

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

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

3. 项目的配置文件介绍

src/config.js

这是项目的全局配置文件，包含应用的基本配置信息。通常包含以下内容：

• API 请求的基础URL
• 路由配置
• 全局常量

export default {
  apiBaseUrl: 'https://api.example.com',
  routes: {
    home: '/home',
    login: '/login',
  },
  constants: {
    appName: 'dva-boot-admin',
  },
};

通过这些配置，可以方便地在整个应用中使用统一的配置信息，减少硬编码，提高代码的可维护性。

dva-boot-admin :cake: react admin dashboard ui LANIF-ADMIN --- react 16 + react-router 4 + dva 2 + antd 4 后台管理 脚手架 项目地址: https://gitcode.com/gh_mirrors/dv/dva-boot-admin