Umi框架入门笔记-创建一个新项目

原创已于 2022-05-31 17:38:55 修改 · 3.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#npm #前端 #react

于 2022-05-31 17:14:45 首次发布

React 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何快速上手Umi框架，包括环境准备、使用官方脚手架创建项目、安装依赖、启动项目、配置修改、部署发布等步骤。Umi是一个强大的前端框架，其.umi目录用于存放临时文件，.umirc.ts用于配置项目，dist目录为构建产出。同时，文章还讲解了路由配置和项目目录结构，帮助开发者理解Umi的基本工作流程。

快速上手

官方教程介绍

环境准备

确保 node 版本是 10.13 或以上。

脚手架

先找个地方建个空目录。

通过官方工具创建项目，

npx @umijs/create-umi-app

安装依赖

npm install

项目目录

.umi 临时文件

.umi 临时目录是整个 Umi 项目的发动机，入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

通常会在 .umi 下看到以下目录，

+ .umi

        + core # 内部插件生成

        + pluginA # 外部插件生成

        + presetB # 外部插件生成

        + umi.ts # 入口文件

临时文件是 Umi 框架中非常重要的一部分，框架或插件会根据代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。

可以在这里调试代码，但不要在 .git 仓库里提交，因为每次启动 umi 时都会被删除并重新生成。

启动项目

npm start

在浏览器里打开 http://localhost:8000/，能看到以下界面，

修改配置

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

不用重启 npm start，webpack 会在背后增量编译，过一会就可以看到以下界面，

部署发布

构建

npm run build

本地验证

发布之前，可以通过 serve 做本地验证，

npm install serve -g

安装完成后启动

serve ./dist

访问 http://localhost:3000，正常情况下应该是和执行 npm start 时是一致的。

部署

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

目录结构

一个基础的 Umi 项目大致是这样的，

.

├── package.json

├── .umirc.ts

├── .env

├── dist

├── mock

├── public

└── src

   ├── .umi

   ├── layouts/index.tsx

   ├── pages

   ├── index.less

   └── index.tsx

   └── app.ts

package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

.umirc.ts

配置文件，包含 umi 内置功能和插件的配置。

.env

环境变量。

比如：

PORT=8888

COMPRESS=none

dist 目录

执行 umi build 后，产物默认会存放在这里。

mock 目录

存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

public 目录

此目录下所有文件会被 copy 到输出路径。

`/src` 目录

.umi 目录

临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。

layouts/index.tsx

约定式路由时的全局布局文件。

pages 目录

所有路由组件存放在这里。

app.ts

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

路由

在 Umi 中，应用都是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

配置路由

在配置文件.umirc.ts中通过 routes 进行配置，格式为路由信息的数组。

例如增加了/index路由：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/index', component: 'index' },
  ],
  fastRefresh: {},
});

配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。

如果指向 src 目录的文件，可以用 @，也可以用 ../。比如 component: '@/layouts/basic'，或者 component: '../layouts/basic'，推荐用前者。