公司有一个旧项目还在用 create-react-app，这个脚手架四年前就停止维护了，目前存在依赖包版本冲突问题，调研后决定使用 UmiJS 作为底层框架，本文为调研中记录的笔记。
目录：
如果还要使用 dva，那就安装 @umijs/plugins，这个插件同时包含 antd 和 dva，就不要单独再安装 antd 了。
$ npm install --save-dev @umijs/plugins
直接安装依赖就可以使用，不需要做任何配置。
$ npm install antd --save
如果要设置 antd 主题，在 .umirc.ts 中添加如下配置：
import { defineConfig } from 'umi'
export default defineConfig({
// ...
plugins: [
'@umijs/plugins/dist/antd',
],
antd: {
theme: {
token: {
colorPrimary: '#74b6b6',
},
},
}
});
执行如下命令就可以使用 TailwindCSS 了。
$ npx umi g tailwindcss
这个命令会自动做三件事：
plugins: ['@umijs/plugins/dist/tailwindcss']；手动安装下 @umijs/plugins。
$ npm install --save-dev @umijs/plugins
在 .umirc.ts 中添加两行配置：
export default defineConfig({
// ...
plugins: [
'@umijs/plugins/dist/dva',
],
dva: {},
});
创建 src/models/test.ts，这个是约定的 src/models 下面的文件会自动注册为 dva model。
export default {
namespace: 'test',
state: {
name: 'hello dva',
},
reducers: {
updateState(state: any, { payload }: any) {
return {
...state,
...payload,
}
},
},
}
在页面中使用 dva
import { useSelector, useDispatch } from 'umi'
export default function Page() {
const dispatch = useDispatch()
const test = useSelector((state: any) => state.test)
return (
<div>
<h1>{ test.name }</h1>
<button
onClick={() => {
dispatch({
type: 'test/updateState',
payload: { name: 'hello world' },
})
}}
>
update name
</button>
</div>
)
}
如果有问题，就将 src 目录下的 .umi 目录删除，然后重新运行 npm run dev 应该就可以了。
只有登录后才能访问 user 页面，否则会自动跳转登录页面。
.umirc.ts 文件 routes 配置添加 wrappers 属性。
export default {
routes: [
{
path: '/user',
component: 'user',
wrappers: [
'@/wrappers/auth',
],
},
{
path: '/login',
component: 'login',
},
]
}
然后在 src/wrappers/auth 中
import { Navigate, Outlet } from 'umi'
export default (props) => {
const { isLogin } = useAuth()
if (isLogin) {
return <Outlet />
} else{
return <Navigate to='/login' />
}
}
命令式页面跳转。
import { history } from 'umi'
history.push('/list')
Link 组件跳转。
import { Link } from 'umi';
export default function Page() {
return (
<div>
<Link to="/users">Users Page</Link>
</div>
)
}
src 目录下直接放置 favicon.ico 文件即可。
在 .umirc.ts 中添加 title 配置：
{
// ...
title: '网站标题',
}
网络字体
在 .umirc.ts 中添加 styles 配置：
{
// ...
styles: [
'https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900&display=swap&subset=latin-ext'
]
}
在 src/global.css 中添加样式：
* {
font-family: 'Nunito Sans', sans-serif;
}
访问不存在的路径时跳转 404 页面，按照如下方式可以自定义 404 页面内容。
创建 src/pages/404.tsx
import { Empty } from 'antd'
export default function Page() {
return (
<Empty description="Not found ..." />
)
}
在 .umirc.ts 中添加如下配置：
{
// ...
routes: [
// ...
{
path: '/*',
component: '404',
}
]
}
↶ 返回首页 ↶