0 引言

最近发现umi提供了区块的功能，可以直接把官方提供的页面模板、组件进行复用，并且是通过可视化的方式进行选取的，选完直接生成代码，体验度很好。

1 准备工作

首先需要通过umi的创建一个项目，不过需要先安装umi就行，这里推荐使用yarn：

1.1 安装yarn和umi

npm install -g yarn  # 安装yarn
yarn -v  # 检查是否安装成功
yarn config set registry https://registry.npm.taobao.org/  # 设置国内镜像

然后使用yarn安装umi：

yarn global add umi
umi -v  # 查看是否安装成功

1.2 创建umi项目

创建一个umi项目：

yarn create umi

框架会提示根据你的需求选择不同的配置，比如项目类型、是否用ts、使用功能等。
创建完成后，就可以启动了：

yarn start / npm run start  #  二选一即可

1.3 报错解决：create-umi 命令不存在

如果提示 create-umi 命令不存在，你需要执行 yarn global bin，然后把 global bin 的路径添加到环境变量 PATH 中。

1.4 报错解决：Plugin umi-plugin-react can’t be resolved

这里如果报错：Plugin umi-plugin-react can't be resolved
解决办法：原因是缺少插件集，使用yarn add umi-plugin-react --dev命令安装相关插件集，安装成功后重新启动服务：yarn start,服务启动成功。

2 添加区块依赖

启动后则有一个示例项目，但是并没有区块添加入口，我们这里安装区块的依赖：

yarn add @umijs/preset-ui -D

然后启动即可看到，页面右下角，多了一个气泡

如果没有出现，那可能是没有基于dev模式启动。
查看启动日志的前几行有没有这一句cross-env UMI_ENV=dev umi dev。
如果没有的话，执行UMI_UI=1 umi dev启动也可达到同样的效果。

3 区块的使用

3.1 创建模板和区块

点击 umi 图标，可以看到这些菜单：

• 任务：执行项目构建、测试和 eslint 检查
• 资产： 包含区块和模板，可以复用antd的组件库

我们先选择一个空白的模板添加：


可以修改一下页面的名称，配置编译js、国际化、包管理器等。

添加完成后，可以看到菜单已经加上了。

下一步我们添加区块，我选择了一个表格组件，点击了添加，提示我：

是官方的bug，我使用网上说的比较多的BABEL_CACHE=none npm start命令启动，可以解决。
我猜测是page的标记为存在缓存中，删除指定缓存可以生效，和上述命令效果一样。

添加完成后，发现表格没有样式，查看原始代码发现，index.less文件内容为空。
删除这个className即可正常。

3.2 报错解决：只有 pages 或 page 目录下的页面才能插入资产

见文中

3.3 异常解决：添加区块后没有样式

参考

https://blog.csdn.net/qq_43382853/article/details/104004636
https://blog.csdn.net/qq_36737839/article/details/113355684