快速上手
官方教程介绍
环境准备
确保 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'
,推荐用前者。