本文正在参加「金石计划」
背景
前几年使用 react 技术栈时，体验了下阿里的 umi ui ，觉得挺有意思的，也去看过它里面的一些源码，了解了下大致的实现思路，后面由于个人时间关系，并且技术栈也逐渐转向vue，就没有怎么关注了。
今年年前在用vue3做后台管理系统时，突然想起 umi ui,但发现官方已经停更了很久了，并且由于之前 umi ui 只支持 react语言，同时官方资产只有ant design，所以就萌生了开发 vue 版的想法
写这篇文章时，刚好大致完成了资产中最复杂的区块的功能，一些小细节，后面在慢慢完善。
技术栈
- UI 服务端：node + typescript + tsc + express + babel + GoGoCode
- UI Web端：vue3.2 + typescript + vite4 + arco design
亮点
- 支持PC端和Mobile端
- 跨语言（目前仅支持vue3，正在对Vue2版本进行适配，后续还可对react提供支持）
功能
一、资产市场
目前包括 Arco Design 和 Vant4 两个资产库。
1.页面资产
页面：一个单页视图，可以是纯静态页面，也可以是包含数据请求等服务的完整页面。
预设了一些常用的 CRUD、卡片列表、表单、详情 等页面，选中相应页面，会自动填充编辑项，也可根据需要自行修改，确认后，会在项目代码中自动配置好页面路由，并将页面资产代码添加进项目里，这样就快速的完成了一个静态页面。
2.区块资产
区块：区别于基础组件，可以是一个包含了业务的组件，或者包含了很多基础组件的高阶组件。
选择区块资产后，页面上显示可插入的区块标记，点击区块标记，将该区块插入到所点击的区块标记位置。因为这块功能是刚开发完成，所以目前只有一个测试的空白区块，后续会往里面添加。
-
选择区块资产
-
显示区块标记
-
选择区块标记
-
插入区块
二、配置管理
通常完成一个模块功能，需要编写 interface 数据结构、request 请求方法，可能还需要 enum 定义数据字典、store 数据存储等，模块配置功能就是解决这些重复的操作，多个模块类型可同时添加，也可单独添加。
三、开发工具
1.Json 转 Typescript
可以将json数据粘贴到这里，点击中间的转换按钮，生成typescript interface结构。
使用
目前资产市场和配置管理两块功能是依赖内部项目模板的，暂时不对外开放使用，其他功能使用不受限制。
1.安装
npm install @keyblade/cli -g
2.启动
keyblade worksUI
启动后，浏览器打开 http://localhost:4300 地址即可进行访问
结语
这款工具主要目的是为了提升前端人员的开发效率，虽然还有很多不完善的地方，但后期会慢慢改进，如果各位还有更好的想法，欢迎一起讨论。
github: github.com/guccihuiyua…
gitee: gitee.com/guccihuiyua…
本文正在参加「金石计划」
