umijs笔记

新建工程

mkdir myapp && cd myapp # 新建文件夹
yarn create @umijs/umi-app # 用脚手架新建工程
# 或 npx @umijs/create-umi-app 
yarn # 安装依赖

目录结构如下

src
└── pages
    ├── index.less
    └── index.tsx

环境配置

新建.env文件

写入配置信息

基础配置

新建.umirc.ts

其中可以对项目进行配置

如果是较为复杂的项目可以将部分配置提取到单独的文件

新建config/config.ts和config/routes.ts

routes.ts中可以对路由进行配置

新建页面test.tsx

export default function Test1() {
    return (
        <div>
            xxx
        </div>
    )
}

然后在config/routes.ts中进行配置

// config/routes.ts

export default [
	{ 
		exact: true, 
		path: '/', 
		component: 'index' 
	},
	{
		exact: true,
		path: '/test1',
		component: 'test'
	}
];

之后在config/config.ts中引入route相关配置就能使路由生效

// config/config.ts

import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
  routes: routes,
});

约定式路由

如果没有route相关配置，umijs会对pages文件中的tsx文件自动生成一份路由，可以参考nextjs约定式路由

umijs渲染完全在前端，因此可以使用 window

引入antd

yarn add antd

然后就可以像在rn中一样使用antd

使用脚手架创建项目

yarn create umi <app name>