Lowcode Engine Vue 渲染器及适配器实现，点击查看在线演示
使用变量时：
this.props.xxx->this.xxxthis.state.xxx->this.xxx
现阶段 vue 代码编辑器还未适配，可以直接使用 react 代码编辑器编辑代码，渲染器已做适配
- state 内容会自动转化为 vue data
- lifecycle 自动适配为 vue lifecycle
componentDidMount->onMountedcomponentDidCatch->onErrorCapturedshouldComponentUpdate->onBeforeUpdatecomponentWillUnmount->onBeforeUnmount
- 其余方法自动转化为 vue methods
import { init } from '@alilc/lowcode-engine'; init(document.getElementById('lce'), { // ... simulatorUrl: [ 'https://unpkg.com/[email protected]/dist/vue-router.global.prod.js', 'https://unpkg.com/@knxcloud/[email protected]/dist/vue-simulator-renderer.js', 'https://unpkg.com/@knxcloud/[email protected]/dist/vue-simulator-renderer.css', ], });
npm install @knxcloud/lowcode-vue-simulator-renderer @knxcloud/lowcode-vue-renderer --save-dev
TIPS：仅支持 cdn 方式引入，npm 包用于提供 typings 等代码提示能力
工程化配置：
{
"externals": {
"@knxcloud/lowcode-vue-simulator-renderer": "var window.LCVueSimulatorRenderer",
"vue": "var window.Vue"
}
}import { vueRendererConfig } '@knx/lowcode-vue-simulator-renderer'; import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui'; import { FunctionalComponent, h } from 'vue'; const ConfigProvider = defineComponent((_, { slots }) => { return () => h(NConfigProvider, { locale: zhCN, dateLocale: dateZhCN }, slots); }); vueRendererConfig.setConfigProvider(ConfigProvider);
更多详细配置请查看 DEMO
git clone [email protected]:KNXCloud/lowcode-engine-vue.git cd lowcode-engine-vue pnpm install pnpm start
项目启动后，提供了 umd 文件，可以结合 DEMO 项目做调试，文件代理推荐XSwitch, 规则参考:
{
"proxy": [
[
"https://unpkg.com/@knxcloud/[email protected]/dist/(.*)",
"http://localhost:5559/$1"
],
]
}