千象 VS Code 扩展

千象 VS Code 扩展是前端全代码项目内的低代码工作台，能够为前端研发工程师提供可视化的组件开发方式，提高开发效率。

快速开始

开启千象功能，分为两种方式，分别对应不同的情况。

1. 创建应用时：使用 kmi 创建应用时，在选择项目中开启千象
2. 已创建没有千象功能的应用时：使用 kmi 微生成器，一键开启千象功能

创建应用

1. 通过 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
   

2. 选中后台模版。

   

3. 选择 react 中后台模板

   

4. 选择开启千象

   

5. 初始化好项目后，vscode 打开该文件夹，npm dev 进行常规页面开发。

6. 打开一个 .lc.schema 文件，开始搭建低代码组件（或页面）

   

已创建应用需要开启千象

1. 在项目根路径中执行命令：

  # npx
  npx kmi g
  # yarn
  yarn kmi g
  # pnpm
  pnpm kmi g

2. 选择开启千象

3. 等待千象功能初始化完成之后，就可以进行低代码开发了

功能介绍

新建低代码组件

1. 右键文件夹，选择【新建低代码组件】：

2. 输入组件名称回车完成创建：

我们可以看到一个低代码组件包含两个文件： .lc.schmea 文件和 .lc.ts 文件

.lc.schmea 文件是低代码组件界面的低代码描述，.lc.ts 文件是低代码组件的 TS 模型（提供数据、逻辑支持）。

全代码、低代码混合编译

低代码组件可以作为 React 组件（Vue 暂不支持，考虑中）在全代码里导入：

低代码组件也可以作为页面统一配置：

启动全代码项目编译（比如如模板里的 pnpm dev）后，低代码组件会被编译进全代码项目的产物里，并且能在浏览器里实时预览：