Umi 新手上高速：从零开始体验前端工程化

作为一名前端开发的新手，初次接触 Umi 框架可能会感到迷茫。为了帮助大家快速入门，我们不妨从最基础的步骤开始，从创建一个空文件夹出发，一步步构建 Umi 项目。

空文件夹之旅：从零起步

首先，创建一个空文件夹，将其命名为“umi-project”。打开终端或命令行，导航到这个文件夹。

初始化 Umi 项目

运行以下命令来初始化 Umi 项目：

npx create-umi

该命令将安装 Umi 依赖项并创建项目文件结构。

基本配置

在项目根目录下，找到 package.json 文件。以下是一些常用的依赖项和配置：

• @umijs/core": "4.x.x" ：Umi 核心依赖项。
• @umijs/preset-react": "4.x.x" ：React 预设，包括路由、状态管理和构建工具等。
• "dev": "umi dev" ：启动本地开发服务器。
• "start": "umi start" ：编译并启动生产构建。

启动本地服务器

运行以下命令启动本地开发服务器：

npm run dev

浏览器将自动打开 http://localhost:7001，显示一个默认的 Umi 页面。

编写你的第一个页面

在 src/pages 目录下创建一个文件，命名为 home.tsx。这是你的第一个页面文件。

import React from "react";

export default function Home() {
  return <h1>欢迎使用 Umi！</h1>;
}

添加到路由

在 config/router.config.js 中，将你的页面添加到路由配置中：

export default [
  {
    path: "/",
    component: "@/pages/home",
  },
];

SEO优化：

为了提高搜索引擎优化，请使用以下长尾关键词：

• Umi 入门教程
• 从零开始 Umi
• 基于 React 的 Umi 框架
• Umi 新手指南
• Umi 构建的前端应用程序
• Node.js 和 Umi 开发
• 使用 TypeScript 的 Umi

文章

结语

恭喜你，你已经从一个空文件夹开始构建了一个 Umi 项目。现在，你可以探索 Umi 的更多功能，例如状态管理、数据获取和组件库。

随着持续的学习和实践，你将成为 Umi 的熟练使用者，并能够创建复杂的、可扩展的前端应用程序。