vue-cook，一个基于vue的低代码平台辅助工具

柳问星
11,422 阅读6分钟

它是什么

VueCook是一个基于vue的低代码平台辅助工具，用来让你的vue组件更容易低代码化。它本身并不是一个低代码平台，它只是用来开发低代码平台的辅助工具。使用它，你可以很容易实现下面页面的效果：

Nov-24-2021 04-13-54.gif

它要干什么

一个低代码平台往往都会有一个用来可视化搭建的界面，通常这个界面会提供界面编排和逻辑编排两种能力。当我们去开发一个低代码平台的时候，往往需要对上述搭建能力进行重新的抽象和组织，而每个平台的开发者对这些能力的抽象和组织又不尽相同，这造成了每个低代码平台之间的资源往往都是不互通的。

VueCook试图对这些搭建能力定义一个规范，用来保证一个低代码平台的可维护性和可扩展性。同时让开发者在开发一个可视化搭建平台的时候，减少一些时间在定义组件的开发规范上，让开发者更容易的将已有的Vue组件和业务逻辑低代码化，并且可以让开发者自己来控制组件的属性编辑方式，即自定义编辑器。

它是怎么做的

为了上述目标，VueCook将搭建能力抽象成了三个东西，组件、逻辑和交互面板，这些在VueCook当中被统称为资源，通过对应的define***Maker函数可以添加自定义的资源。其中：

  • 组件(defineComponentMaker)：一种预制好的UI控件，支持一些属性的配置，如props、slots、events等。VueCook会将这些配置通过Vue中的动态组件进行渲染，并且渲染的时候不会为组件添加任何额外的包裹层，以保证组件DOM结构在渲染时与开发组件的时候是一致的。
  • 逻辑(defineLogicMaker)：一个定义好入参的函数，它用来表达某种具体的业务逻辑。通过配置它的入参，将其配置放入到某一个组件的属性中，可以把某种业务逻辑和组件结合起来。
  • 交互面板(definePanelMaker)：一个自定义的交互面板，用来扩展搭建平台的编排能力，利用它可以扩展自定义的编辑器，自定义的信息展示面板等等，它的本质是对组件和逻辑的配置进行增删改查，以达到扩展编排能力的目的。

它有的一些特性

它基于Vue3实现，拥有以下特性

  • 💎 组件渲染DOM一致: 将组件渲染成对应的DOM结构时没有添加任何的包裹div层
  • 📝 多页面同时编辑: 支持同时编辑多个页面
  • 🧱 自定义组件: 支持自定义低代码组件，或者将现有的组件低代码化
  • 🔗 自定义逻辑: 支持自定义低代码逻辑，或者将现有的业务逻辑低代码化
  • ⚙️ 自定义交互面板: 支持自定义的交互面板，如自定义编辑器
  • 😊 内置多个交互面板: 内置了多个开箱即用的交互面板，如基础组件编辑器、页面编辑器等等

它怎么结合进项目

  • 先安装
npm install vue-cook
// 或者
yarn add vue-cook
  • 然后在路由配置文件中添加相关路由
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { CookEditor, createCookEditorState} from "vue-cook"
import "vue-cook/dist/style.css"

const cookEditorState = createCookEditorState() // 创建编辑器全局状态
const routes = [
    {
        path: '/vue-cook', // 自定义的地址
        component: CookEditor,
        props: route => ({
            state: cookEditorState,  // 传入状态
            preview: route.query.preview // 是否预览
        })
    }
]
const router = createRouter({
    history: createWebHistory(), // 也可以使用hash模式
    routes,
})

export default router

它的一个简单的示例

这里有一个简单的使用VueCook创建的编辑器页面

VueCook-CookEditor

可以参照以下步骤，使用这个编辑器

  • 在左侧的页面组件树中点击 + ，新增一个页面，点击新增的页面，中间会打开一个页面编辑器面板
  • 鼠标移到页面编辑面板中间，可以看到一个高亮的矩形框，点击选中这个矩形框，左边的组件编辑器面板会显示当前选中组件的一些可配置项，其中插槽一栏中，有一个名称为default的框，上面写着拖拽组件到此处添加
  • 从下方的资源面板中，将表格组件拖到右上编辑器的框中，可以看到下方的表格发生了变化，出现了一行数据，它就是添加好的表格组件，同时，在中间的页面编辑面板中，应该可以看到一个带按钮和空表格的页面，选中这个组件。
  • 在组件编辑面板的属性一栏中，出现了一个名称为fetch的输入框，它的右边有一个图标，鼠标移上去，会提示拖拽逻辑到此处添加
  • 从资源面板中拖入fetch到上面的位置，可以看到输入框中自动填入了一个逻辑配置，同时，页面中的表格组件的按钮文字也变成点我获取数据
  • 在页面编辑的上方有一堆的按钮，点击第三个按钮，关闭选中模式，点击表格组件中的按钮，稍等片刻，可以看到数据加载成功
  • 还可以尝试配置表格组件的maxAge和minAge，表格中数据会按照相应的年龄范围加载

经过一些编辑步骤后，会生成一份配置，这份配置大概长这样

const page = {
    "name": "新增页面",
    "uid": "8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "path": "/8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "component": {
        "uid": "807dd687-c54f-4223-837a-706f918c4205",
        "name": "主应用",
        "makerType": "component",
        "makerName": "主应用",
        "makerPkg": "vue-cook",
        "slots": {
            "default": [{
                "uid": "54376c75-f1db-4ef5-9f21-ac673de70cf9",
                "name": "表格",
                "makerType": "component",
                "makerName": "表格",
                "makerPkg": "test-pkg",
                "props": {
                    "fetch": "{"uid":"571a0a02-0dbe-439b-8b5b-a448e3a183bd","name":"fetch","makerType":"logic","makerName":"fetch","makerPkg":"test-pkg","props":{"maxAge":"24","minAge":"20"}}"
                }
            }]
        }
    }
}

它可以存储下来，等到使用时在通过接口取，下面就是一个取出来配置数据后，然后渲染出来的页面

VueCook-CookPlayer

感谢看到这里😊，更多的内容可以参考VueCook的官方文档

VueCook

VueCook还有很多需要改进的地方，欢迎给它提意见，它的GitHub地址在这里

VueCook-GitHub

请注意，vue-cook还在开发中，请不要将它用到生产环境中

avatar
文章
阅读
粉丝