Lowcode Engine Vue 渲染器及适配器实现，点击查看在线演示
PS: 该项目仅包含画布实现，不能直接运行，如果需要本地查看效果请访问 DEMO 仓库
我们提供了 npm init @knxcloud/lowcode@latest 命令用于初始化一个基础的低代码组件项目，该项目基于 vue-cli 构建。项目启动后，会生成一个 /assets.json 文件，该文件可直接作为低代码物料的导入入口，部分代码示例如下：
const editorInit = (ctx: ILowCodePluginContext) => {
return {
name: 'editor-init',
async init() {
const { material, project } = ctx;
const assets = await fetch('http://127.0.0.1:9000/assets.json').then((res) =>
res.json()
);
material.setAssets(assets);
},
};
};使用变量时：
this.props.xxx->this.xxxthis.state.xxx->this.xxx
现阶段 vue 代码编辑器还未适配，可以直接使用 react 代码编辑器编辑代码，渲染器已做适配：
- state 内容会自动转化为 vue data
- lifecycle 自动适配为 vue lifecycle
componentDidMount->onMountedcomponentDidCatch->onErrorCapturedshouldComponentUpdate->onBeforeUpdatecomponentWillUnmount->onBeforeUnmount
- 其余方法自动转化为 vue methods
支持的 vue 生命周期函数：
beforeMountmountedbeforeUpdateupdatedbeforeUnmountunmountederrorCaptured
对于 v-model 的适配：
在 assets 中使用 name 为 v-model 的属性会被作为双向绑定特性编译，编译的逻辑为
v-model -> modelValue prop + onUpdate:modelValue event
v-model:value -> value prop + onUpdate:value event
并且，渲染器支持 onUpdate:value 和 onUpdateValue 两种事件处理方式，即在使用事件时，可以使用 onUpdateXxx 代替 onUpdate:xxx
import { init, project } from '@alilc/lowcode-engine';
import { setupHostEnvironment } from '@knxcloud/lowcode-utils';
setupHostEnvironment(project);
init(document.getElementById('lce'), {
// ...
simulatorUrl: [
'https://unpkg.com/@knxcloud/lowcode-vue-simulator-renderer/dist/vue-simulator-renderer.js',
'https://unpkg.com/@knxcloud/lowcode-vue-simulator-renderer/dist/vue-simulator-renderer.css',
],
});当不指定版本号时，默认使用最新版，推荐在 cdn 链接上添加适配器具体版本号
npm install @knxcloud/lowcode-vue-simulator-renderer @knxcloud/lowcode-vue-renderer --save-devTIPS：仅支持 cdn 方式引入，npm 包用于提供 typings 等代码提示能力
工程化配置：
{
"externals": {
"@knxcloud/lowcode-vue-simulator-renderer": "var window.LCVueSimulatorRenderer",
"vue": "var window.Vue"
}
}import { vueRendererConfig } from '@knx/lowcode-vue-simulator-renderer';
import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
import { defineComponent, h } from 'vue';
const ConfigProvider = defineComponent((_, { slots }) => {
return () => h(NConfigProvider, { locale: zhCN, dateLocale: dateZhCN }, slots);
});
vueRendererConfig.setConfigProvider(ConfigProvider);更多详细配置请查看 DEMO
git clone git@github.com:KNXCloud/lowcode-engine-vue.git
cd lowcode-engine-vue
pnpm install
pnpm start项目启动后，提供了 umd 文件，可以结合 DEMO 项目做调试，文件代理推荐XSwitch, 规则参考:
{
"proxy": [
[
"(?:.*)unpkg.com/@knxcloud/lowcode-vue-simulator-renderer(?:.*)/dist/(.*)",
"http://localhost:5559/$1"
],
]
}微信搜索: cjf395782896，加好友&备注：低代码引擎，申请入群