Umi4+react从0-1搭建一个简单项目

因为很少有需要我从0到1搭建项目的机会,所以自己试着按照官方文档搭建一个简单的react项目.

按照官方指令快速创建项目

npx create-umi@latest

创建成功后结合项目需要和文档,对项目基本结构进行配置

1、umirc配置文件 config/config.ts功能与umirc内配置功能一样,优先级略低,可以只保留config文件,保持文件目录整洁;

具体可以结合项目需要参照umirc文件配置api按需配置:umijs.org/docs/api/co… 总之可以通过基础配置文件实现运行时、构建时的性能优化、方便代码开发等,例如别名导入、代码压缩、配置proxy、配置打包、配置缓存等等.

2、配置全局加载文件 在src目录下,新建loading.tsx和global.less,具体参照文档

3、layout样式配置 可以直接配置页面layout的菜单展示位置、样式,各种颜色,基础logo和网站名称等.

4、request请求二次封装 umi/max本身集成了request,我们可以根据项目需要对request请求进行二次封封装,在app.ts里面配置

5、路由配置 路由配置本身是在config.ts内定义的,但是我们可以根据实际需要将配置信息提取到单独的router.ts文件内

6、设置默认的主题

  memo.theme ??= {
    // 全局主题
    token: {
      colorPrimary: '#1677ff',
      borderRadius: 2
    },
    // 组件主题
    components: {
      Button: {
        colorBgTextHover: '#1677ff',
      },
    }
  };具体参数参照antd的官方文档

其实到了这一步,项目的基础模型搭建完成了,接下来就是考虑到实际开发过程中,有哪些可以提升开发体验,提高效率的操作了.

7、@umijs/max 内置了 valtio 数下·来说,可以开箱即用