Umi 框架 quickstart

1. 创建 Umi 项目

首先，使用 pnpm 来创建一个新的 Umi 项目：

pnpm dlx create-umi@latest

在交互式命令行中，您需要回答以下问题：

• 目标文件夹名称：输入 my-app
• 选择 Umi 应用模板：选择 Simple App（简单应用）
• 选择包管理器：选择 pnpm
• 选择 npm 镜像源：选择 taobao（淘宝镜像，国内下载速度更快）

2. 进入项目目录并启动开发服务器

cd my-app
pnpm dev

执行上述命令后，开发服务器将启动，默认情况下您可以通过 http://localhost:8000 访问您的应用。

3. 项目结构说明

创建的 Umi 项目具有以下结构：

my-app/
├── .gitignore          # Git 忽略文件
├── .npmrc              # npm 配置
├── .umirc.ts           # Umi 配置文件
├── package.json        # 项目依赖和脚本
├── pnpm-lock.yaml      # pnpm 锁文件
├── src/                # 源代码目录
│   ├── assets/         # 静态资源目录
│   │   └── yay.jpg     # 示例图片
│   ├── layouts/        # 布局组件目录
│   │   ├── index.less  # 布局样式
│   │   └── index.tsx   # 布局组件
│   └── pages/          # 页面目录
│       ├── docs.tsx    # 文档页面
│       └── index.tsx   # 首页
├── tsconfig.json       # TypeScript 配置
└── typings.d.ts        # TypeScript 类型声明

4. 路由系统

Umi 使用基于文件系统的约定式路由，但在这个简单应用模板中，路由是在 .umirc.ts 文件中配置的：

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: 'pnpm',
});

这里定义了两个路由：

• / - 首页，对应 src/pages/index.tsx 组件
• /docs - 文档页，对应 src/pages/docs.tsx 组件

5. 布局系统

src/layouts/index.tsx 文件定义了全局布局，它会包裹所有的路由页面：

import { Link, Outlet } from 'umi';
import styles from './index.less';

export default function Layout() {
  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li>
          <a href="https://github.com/umijs/umi">Github</a>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

<Outlet /> 组件是路由内容的占位符，当前路由对应的页面会渲染在这个位置。

6. 页面开发

首页 (src/pages/index.tsx)

import yayJpg from '../assets/yay.jpg';

export default function HomePage() {
  return (
    <div>
      <h2>Yay! Welcome to umi!</h2>
      <p>
        <img src={yayJpg} width="388" />
      </p>
      <p>
        To get started, edit <code>pages/index.tsx</code> and save to reload.
      </p>
    </div>
  );
}

文档页 (src/pages/docs.tsx)

const DocsPage = () => {
  return (
    <div>
      <p>This is umi docs.</p>
    </div>
  );
};

export default DocsPage;

7. 添加新页面

要添加新页面，您需要：

1. 在 .umirc.ts 中添加新的路由配置

// .umirc.ts 中添加
{ path: "/about", component: "about" }

2. 添加About页：about.tsx

const AboutPage = () => {
    return (
     // src/layouts/index.tsx 中添加
        <div>
            <p>About</p>
        </div>
    );
  };
export default AboutPage;

相关资源链接

• Umi 官方文档
• Ant Design - 推荐与 Umi 配合使用的 UI 组件库
• Umi GitHub 仓库