# h5_lowcode_platform

**Repository Path**: bronson/h5_lowcode_platform

## Basic Information

- **Project Name**: h5_lowcode_platform
- **Description**: 基于Vue3的可视化编辑平台
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://h5lc.wingosite.site
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-14
- **Last Updated**: 2022-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI, 可视化, lowcode

## README

# H5_lowcode_plat

## 说明

一款基于 Vue3+Webpack+ElememtPlus 的可视化编辑平台，集成市面上流行的 elementplus ui 框架，可以快速开发 H5 页面应用。

项目初心是为了能够更好的学习低代码平台的工作原理和一些基础业务的快速响应，减少常规业务的开发时间，提升代码质量。当然，这不仅仅是一个学习小 demo，我更希望能够产出一些高质量的组件，在学习中成长。

同时，也希望广大开发者也能够参与进来，给笔者提供一些帮助以及思考。思想上的碰撞才能更好的提升自我。

[gitee项目地址]: https://gitee.com/bronson/h5_lowcode_platform.git

## 演示地址

[线上演示地址](https://h5lc.wingosite.site)

## 平台功能

物料区：提供平台常用的组件和工具；

内容区：内容显示区（可上下拖拽调整位置），点击组件时，可以在配置区编辑组件的信息。可移除当前的组件。

配置区：编辑选中组件的信息（包括但不限于：样式配置，位置配置，组件基础信息等）

## 数据结构

```javascript
// 物料区的数据结构
"data":[
    {
        "title":"通用组件", // 分类名称
        "collapse":false, // 是否折叠
        "items":[
            {
                "key":"base-text",
            	"text":"文本",
            },
            {
                "key":"base-button",
            	"text":"按钮",
            }
        ]
    },
    {
        "title":"高级组件", // 分类名称
        "collapse":true, // 是否折叠
        "items":[
            {
                "key":"upload",
            	"text":"上传组件",
            },
            {
                "key":"swipper",
            	"text":"幻灯片",
            }
        ]
    }
]
```

```javascript
// 内容区数据结构
"config":{
    "base-text":{
        title:"文本", // 名称
        compId:"", // 组件ID
        compName:"", // 组件名称
        info:{
            type:"text", // text | textarea | select
            label:"文本内容"，
            value:"默认文本", // 数据
            required:false
        },
        style:[
            {
                type:"font",
                label:"字体",
                attr:["font-weight","text-decoration","font-style","text-align"],
                value:["400","none","inherit","left"],
                required:false
        	},
            {
                type:"color-picker",
                label:"字体颜色",
                attr:"color",
                value:"#ffffff",
            }
        ]
    }
}
```

## 安装

```shell
git clone https://gitee.com/bronson/h5_lowcode_platform.git
cd h5_lowcode_platform
npm install
npm run dev
```

## 参考

[GitHub](https://github.com/yangyuji/h5-factory/blob/master/src/config/comp.config.js)