1 Star 0 Fork 148

产品项目开发 / vite-vue3-lowcode

forked from 猿计划 / vite-vue3-lowcode 
加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

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

目前还只是一个简单的模板,后面可能会引入较为完善的机制系统,感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以学到 vue3 很多有趣的新特性和玩法。

license

中文 | English

克隆项目

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
or
git clone --depth=1 https://github.com/buqiyuan/vite-vue3-lowcode.git

技术栈

功能清单

  • 动态添加页面
  • 拖拽式生成组件
  • service worker + indexeddb 实现无服务端的前端交互
  • 数据源管理(支持导入 swagger JSON 生成数据模型及接口)
  • 提供预置函数
  • 更多组件的封装
  • 其他...

简易说明

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

快速生成组件属性

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

JSON.stringify(
  $$('#props + table tbody tr').reduce((prev, curr) => {
    const children = curr.children
    const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
    const child3Text = children[3].textContent
    const defaultValue = ['true', 'false'].includes(child3Text)
      ? child3Text
      : `'${child3Text == '-' ? '' : child3Text}'`
    const value = (propObj[children[2].textContent] ?? propObj['string'])({
      label: `'${children[1].textContent}'`,
      defaultValue
    }).replaceAll('"', '')
    prev[key] = value
    return prev
  }, {})
).replaceAll('"', '')
// 在vant文档中 chrome控制台输入以下代码,快速生成组件事件
JSON.stringify(
  $$('#events + table tbody tr').reduce((prev, curr) => {
    const children = curr.children
    const event = {
      label: children[1].textContent,
      value: children[0].textContent
    }
    return prev.concat([event])
  }, [])
)
  .replaceAll(/(?<!:)\"(?!,|})/g, '')
  .replace(/\"/g, "'")

部分功能演示

RHfBbn.gif

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

 EdgeIE  EdgeEdge FirefoxFirefox ChromeChrome SafariSafari
not support last 2 versions last 2 versions last 2 versions last 2 versions

提交规范

  • feat 增加新功能
  • fix 修复问题/BUG
  • style 代码风格相关无影响运行结果的
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • test 测试相关
  • docs 文档/注释
  • build 对构建系统或者外部依赖项进行了修改
  • chore 依赖更新/脚手架配置修改等
  • workflow 工作流改进
  • ci 持续集成
  • types 类型定义文件更改
  • wip 开发中

快速开始

安装依赖

npm install
# or
yarn add

启动项目

npm run dev

项目打包

npm run build

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

vue3.x vite2.x vant element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/ppdev/vite-vue3-lowcode.git
git@gitee.com:ppdev/vite-vue3-lowcode.git
ppdev
vite-vue3-lowcode
vite-vue3-lowcode
main

搜索帮助