Dumi 模板项目启动与配置教程

1. 项目目录结构及介绍

在克隆或下载 Dumi 模板项目后，你将看到以下目录结构：

dumi-template/
├── .env              # 环境变量配置文件
├── .eslintrc         # ESLint 配置文件
├── .prettierrc       # Prettier 配置文件
├── .stylelintrc      # Stylelint 配置文件
├── .umirc.ts         # Umi 配置文件
├── mock              # 模拟数据目录
├── src               # 源码目录
│   ├── assets        # 静态资源目录
│   ├── components    # 组件目录
│   ├── layouts       # 布局目录
│   ├── models        # 模型目录
│   ├── pages         # 页面目录
│   ├── services      # 服务目录
│   └── utils         # 工具函数目录
├── test              # 测试目录
├── README.md         # 项目说明文件
└── package.json      # 项目依赖和配置

以下是每个目录和文件的简要介绍：

• .env：存放项目所需的环境变量。
• .eslintrc：ESLint 配置文件，用于统一代码风格和错误提示。
• .prettierrc：Prettier 配置文件，用于统一代码格式。
• .stylelintrc：Stylelint 配置文件，用于统一样式代码格式。
• .umirc.ts：Umi 配置文件，用于配置路由、插件等。
• mock：模拟数据目录，用于开发时模拟后端数据。
• src：源码目录，包含所有业务相关的代码。
• test：测试目录，存放单元测试和集成测试代码。
• README.md：项目说明文件，介绍项目的基本信息和如何使用。
• package.json：项目依赖和配置文件，定义了项目的依赖包和启动脚本。

2. 项目的启动文件介绍

在项目根目录中，可以通过以下命令启动项目：

npm start

此命令会启动一个本地开发服务器，通常情况下，开发服务器的地址为 http://localhost:8000。启动过程中，会执行以下操作：

• 使用 umi 框架提供的启动脚本。
• 加载 .umirc.ts 中的配置。
• 检查和安装项目依赖。
• 启动本地开发服务器。

3. 项目的配置文件介绍

项目的配置文件 .umirc.ts 是 Umi 框架的核心配置文件，其中可以配置路由、插件、数据流等。

以下是一些常见的配置项：

import { defineConfig } from 'dumi';

export default defineConfig({
  // 基础路由配置
  base: '/',
  // 路由配置
  routes: [
    { path: '/', component: '@/pages/index' },
    // 其他路由配置...
  ],
  // 插件配置
  plugins: [
    // 插件列表...
  ],
  // 数据流配置
  dva: {
    // 数据流相关配置...
  },
  // 其他配置...
});

在 .umirc.ts 文件中，你可以根据项目的实际需求进行配置调整，以达到预期的效果。