- Notifications
You must be signed in to change notification settings - Fork85
Lowcode engine renderer and simulator for vue
License
KNXCloud/lowcode-engine-vue
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Lowcode Engine Vue 渲染器及适配器实现，点击查看在线演示
PS: 该项目仅包含画布实现，不能直接运行，如果需要本地查看效果请访问DEMO 仓库
我们提供了npm init @knxcloud/lowcode@latest 命令用于初始化一个基础的低代码组件项目，该项目基于vue-cli 构建。项目启动后，会生成一个/assets.json 文件，该文件可直接作为低代码物料的导入入口，部分代码示例如下：
consteditorInit=(ctx:ILowCodePluginContext)=>{return{name:'editor-init',asyncinit(){const{ material, project}=ctx;constassets=awaitfetch('http://127.0.0.1:9000/assets.json').then((res)=>res.json(),);material.setAssets(assets);},};};
使用变量时：
this.props.xxx->this.xxxthis.state.xxx->this.xxx
若直接使用 react 代码编辑器编辑代码，渲染器已做适配：
- state 内容会自动转化为 vue data
- lifecycle 自动适配为 vue lifecycle
componentDidMount->onMountedcomponentDidCatch->onErrorCapturedshouldComponentUpdate->onBeforeUpdatecomponentWillUnmount->onBeforeUnmount
- 其余方法自动转化为 vue methods
appHelper 暴露给this 的属性都会加上$ 前缀，区别于其他属性，如
utils->this.$utilsconstants->this.$constants
现已支持Vue 代码编辑器 @knxcloud/lowcode-plugin-vue-code-editor，支持情况如下
- ESModule
- import (assets 加载的包，可以使用
import语法导入) - export default (必须导出一个组件)
- export
- import (assets 加载的包，可以使用
- data
- props
- emits
- computed
- watch
- provide
- inject
- setup
- async setup
- return void
- return object
return function
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
- activated
- deactivated
- errorCaptured
- renderTracked
- renderTriggered
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
对于 v-model 的适配：
在 assets 中使用 name 为v-model 或v-model:xxx 的属性会被作为双向绑定特性编译，编译的逻辑为
v-model -> modelValue prop + onUpdate:modelValue eventv-model:xxx -> xxx prop + onUpdate:xxx event若使用了beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 钩子，则渲染器在使用时，必须作为 VueRouter 页面使用，使用示例
// router.tsimport{createRouter,createWebHistory}from'vue-router'importVueRenderer,{LOWCODE_ROUTE_META,setupLowCodeRouteGuard,}from'@knxcloud/lowcode-vue-renderer'constschema={}// 低代码设计器导出的页面 schemaconstcomponents={}// 组件映射关系对象constrouter=createRouter({history:createWebHistory('/'),routes:[{name:'lowcode-page'path:'/lowcode-page-path',component:VueRenderer,meta:{[LOWCODE_ROUTE_META]:schema,},props:{schema:schema，components:components,}}]})setupLowCodeRouteGuard(router)exportdefaultrouter;
若使用了async setup 或者init dataSource，则需要在渲染器组件外部包裹Suspense 组件，使用方式参考Suspense
import{init,project}from'@alilc/lowcode-engine';import{setupHostEnvironment}from'@knxcloud/lowcode-utils';setupHostEnvironment(project,'https://unpkg.com/vue@3.2.47/dist/vue.runtime.global.js');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 链接上添加适配器具体版本号
git clone git@github.com:KNXCloud/lowcode-engine-vue.gitcd lowcode-engine-vuepnpm install&& pnpm -r buildpnpm start
项目启动后，提供了 umd 文件，可以结合DEMO 项目做调试，文件代理推荐XSwitch, 规则参考:
{"proxy": [ ["(?:.*)unpkg.com/@knxcloud/lowcode-vue-simulator-renderer(?:.*)/dist/(.*)","http://localhost:5559/$1" ], ]}微信搜索: cjf395782896，加好友&备注：低代码引擎，申请入群
About
Lowcode engine renderer and simulator for vue
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.