千象 VS Code 扩展
千象 VS Code 扩展是前端全代码项目内的低代码工作台,能够为前端研发工程师提供可视化的组件开发方式,提高开发效率。
快速开始
开启千象功能,分为两种方式,分别对应不同的情况。
- 创建应用时:使用 kmi 创建应用时,在选择项目中开启千象
- 已创建没有千象功能的应用时:使用 kmi 微生成器,一键开启千象功能
创建应用
通过 kmi 创建工程。
# pnpm
pnpm create @kmi/create-kmi@latest demo-qx-lc
# npm
npm init @kmi/kmi@latest demo-qx-lc
# yarn
yarn create @kmi/kmi demo-qx-lc
选中后台模版。
![模板选择](https://static.yximgs.com/udata/pkg/ks-ad-fe/qianxiang-static/image.png)
选择 react 中后台模板
![react中后台模板选择](https://static.yximgs.com/udata/pkg/ks-ad-fe/qianxiang-static/image1.png)
选择开启千象
![开启千象](https://static.yximgs.com/udata/pkg/ks-ad-fe/qianxiang-static/image2.png)
初始化好项目后,vscode 打开该文件夹,npm dev 进行常规页面开发。
打开一个 .lc.schema 文件,开始搭建低代码组件(或页面)
![开始搭建](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655261624146.fe8058e5b46a7ac6.png)
已创建应用需要开启千象
- 在项目根路径中执行命令:
# npx
npx kmi g
# yarn
yarn kmi g
# pnpm
pnpm kmi g
- 选择开启千象
![开启千象](https://static.yximgs.com/udata/pkg/ks-ad-fe/qianxiang-static/image3.png)
- 等待千象功能初始化完成之后,就可以进行低代码开发了
功能介绍
新建低代码组件
- 右键文件夹,选择【新建低代码组件】:
![右键文件夹](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655262067317.0f3cf67b1758f80f.png)
- 输入组件名称回车完成创建:
![输入组件名称](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655262209868.4a5633a584661826.png)
我们可以看到一个低代码组件包含两个文件: .lc.schmea 文件和 .lc.ts 文件
![低代码组件文件](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655262346791.a8fab113087be966.png)
.lc.schmea 文件是低代码组件界面的低代码描述,.lc.ts 文件是低代码组件的 TS 模型(提供数据、逻辑支持)。
全代码、低代码混合编译
低代码组件可以作为 React 组件(Vue 暂不支持,考虑中)在全代码里导入:
![导入低代码组件](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655263035311.83c88f4c397efc1f.png)
低代码组件也可以作为页面统一配置:
![作为低代码页面](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655263247313.de1d286ec7e5d0fe.png)
启动全代码项目编译(比如如模板里的 pnpm dev )后,低代码组件会被编译进全代码项目的产物里,并且能在浏览器里实时预览:
![混合编译](https://static.yximgs.com/udata/pkg/ks-ad-fe/chrome-plugin-upload/2022-06-15/1655262894857.e83ca4b617d59f23.png)
| |