What is it

VueCook is a VUe-based low-code platform aid to make your VUE components easier to de-code. It’s not a low-code platform per se, it’s just a tool for developing low-code platforms. Using it, you can easily achieve the following page:

What does it want?

A low-code platform will often have an interface for visual architecture, usually providing both interface and logical orchestration capabilities. When we develop a low-code platform, we often need to re-abstract and organize the above capabilities, and the developers of each platform have different abstractions and organizations of these capabilities, which causes that the resources between each low-code platform are often not interconnected.

VueCook attempts to define a specification of these buildable capabilities to ensure the maintainability and extensibility of a low-code platform. At the same time let developers in the development of a visual building platform, reduce some time in the definition of component development specifications, so that developers will be easier to the existing Vue components and business logic low code, and can let developers to control their own components of the attribute editing way, that is, custom editor.

How does it work

To this end, VueCook abstracts the build capability into three things, components, logic, and interaction panels. These are collectively referred to as resources in VueCook, and custom resources can be added through the corresponding define***Maker function. Among them:

  • Components (defineComponentMaker) : a prefabricated UI control that supports the configuration of properties such as props, slots, events, etc. VueCook renders these configurations through dynamic components in Vue without adding any additional layers to the component to ensure that the DOM structure of the component is the same as it was when the component was developed.
  • Logic (defineLogicMaker) : a function with defined input parameters to express some specific business logic. You can combine some business logic with a component by configuring its input parameters and putting its configuration into a component’s properties.
  • Interactive panel (definePanelMaker) : a custom interaction panel, which is used to extend the layout capability of the building platform. It can be used to extend the custom editor, custom information display panel, etc. Its essence is to add, delete, change and check the configuration of components and logic, in order to achieve the purpose of expanding the layout capability.

It has some properties

It is implemented based on Vue3 and has the following features

  • 💎 Components render DOM consistently: components render into their corresponding DOM structures without adding any wrapped div layers
  • 📝 Multi-page simultaneous editing: Supports simultaneous editing of multiple pages
  • 🧱 Custom components: Supports custom low-code components or low-code existing components
  • 🔗 Custom logic: Supports custom low-code logic or low-code existing business logic
  • ⚙️ Custom interaction panel: Supports custom interaction panels, such as custom editors
  • 😊 Built-in multiple interaction panels: Built-in multiple out-of-the-box interaction panels, such as the base component editor, page editor, and so on

How does it fit into the project

  • First installation
NPM install vue-cook // or yarn add vue-cookCopy the code
  • Then add the relevant routes to the routing configuration file
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { CookEditor, createCookEditorState} from "vue-cook"
import "vue-cook/dist/style.css"

const cookEditorState = createCookEditorState() // Create editor global state
const routes = [
    {
        path: '/vue-cook'.// A custom address
        component: CookEditor,
        props: route= > ({
            state: cookEditorState,  // Incoming state
            preview: route.query.preview // Whether to preview})}]const router = createRouter({
    history: createWebHistory(), // Hash mode can also be used
    routes,
})

export default router
Copy the code

A simple example of it

Here is a simple editor page created using VueCook

VueCook-CookEditor

You can use the editor by following the steps below

  • Click + in the page component tree on the left to create a new page. Click the new page and a page editor panel will open in the middle
  • Move the mouse pointer to the middle of the page editing panel, you can see a highlighted rectangular box. Click and select this rectangular box, and the component editor panel on the left will display some configurable items of the currently selected component. In the slot column, there is a box named Default, which says drag component to add here
  • From the bottom of the resource panel, form component will drag in the upper right of the editor box, you can see the bottom of the form has changed, there was a row data, it is to add good form components, at the same time, in the middle of the page to edit panel, you should see the page with buttons and empty table, select the components.
  • In the properties bar of the component edit panel, an input box named FETCH appears. There is an icon to the right of the box. If the mouse moves over it, it will prompt you to drag logic to add it
  • Drag the fetch from the resources panel to the location above, and you can see that the input field is automatically filled with a logical configuration. At the same time, the button text of the table component on the page also becomes “I fetch data”
  • Click the third button, turn off the selected mode, click the button in the table component, and wait a moment to see that the data has loaded successfully
  • You can also try configuring the maxAge and minAge of the table component so that the data in the table is loaded according to the corresponding age range

After a few editing steps, a configuration is generated that looks something like this

const page = {
    "name": "New page"."uid": "8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5"."path": "/8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5"."component": {
        "uid": "807dd687-c54f-4223-837a-706f918c4205"."name": "Main application"."makerType": "component"."makerName": "Main application"."makerPkg": "vue-cook"."slots": {
            "default": [{
                "uid": "54376c75-f1db-4ef5-9f21-ac673de70cf9"."name": "Form"."makerType": "component"."makerName": "Form"."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"}}"}}]}}}Copy the code

It can be stored and retrieved through the interface when it is used. Here is a page that is rendered after the configuration data is retrieved

VueCook-CookPlayer

Thanks for looking at 😊. For more information, please refer to VueCook’s official documentation

VueCook

VueCook still has a lot of work to do. You are welcome to comment on it. Its GitHub address is here

VueCook-GitHub

In addition, the author is looking for a job related to front-end. If you want to introduce a job to me, you can contact me at [email protected] to 😊. If it is related to front-end low-code platform or page building, it will be better if it is 🎉.