基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台

克隆主分支，忽略 git-pages 等无关分支

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
# or
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git

技术栈

编程语言：TypeScript 4.x + JavaScript
构建工具：Vite 2.x
前端框架：Vue 3.x
路由工具：Vue Router 4.x
状态管理：Vuex 4.x
PC 端 UI 框架：Element Plus
H5 端 UI 框架：vant
CSS 预编译：Stylus / Sass / Less
HTTP 工具：Axios
Git Hook 工具：husky + lint-staged
代码规范：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
提交规范：Commitizen + Commitlint
单元测试：vue-test-utils + jest + vue-jest + ts-jest
自动部署：GitHub Actions

功能清单

简易说明

目前在使用表单时，需要把相关的表单控件放到表单容器内部，并且需要将按钮放到表单容器内，然后再讲按钮的type设置为表单提交按钮这时候点击提交按钮才会自动收集表单容器内部的所有字段和值

快速生成组件属性

// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
let propObj = {
  string: (config) => `createEditorInputProp(${JSON.stringify(config)})`,
  number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`,
  boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})`
}

$$('#props + table tr').reduce((prev, curr) => {
  const children = curr.children
  const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
  const value = (propObj[children[2].textContent] ?? propObj['string'])({
    label: `'${children[1].textContent}'`
  }).replaceAll('"', '')
  prev[key] = value
  return prev
}, {})