如何配置 Umi 页面？

Umi是一个基于React的前端框架，用于快速构建高性能、模块化的单页应用。以下是基本的步骤来配置一个新的页面：

1. **初始化项目**：首先确保已安装`umi`和`@umijs/config`，然后通过命令行运行`npm create umi your-project-name`来创建新项目。

2. **创建页面组件**：在`src/pages`目录下，创建一个新的JavaScript或TypeScript文件，例如`index.tsx`，这是你的页面入口点。你可以在这里编写React组件，并导入所需的路由和依赖。

// src/pages/index.tsx
import React from 'react';
import { Outlet } from '@umijs/react-router';

function HomePage() {
  return <div>Welcome to Home Page</div>;
}

export default HomePage;

3. **配置路由**：在项目的`config`文件夹下，比如`config routes.ts`，定义你的路由规则。这会告诉Umi如何导航到你的页面。

// config/routes.ts
import { RouterConfig } from '@umijs/core';

const routes: RouterConfig[] = [
  {
    path: '/home',
    component: '@/pages/HomePage',
  },
];

export default routes;

4. **启动服务**：在项目根目录下运行`npm run dev`或`yarn start`启动开发服务器，然后访问`http://localhost:3000/home`即可看到新的页面。