All Projects → buqiyuan → vite-vue3-lowcode

buqiyuan / vite-vue3-lowcode

Licence: MIT License
vue3.x + vite2.x + vant + element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具

Programming Languages

typescript
32286 projects
Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to vite-vue3-lowcode

vue3-admin
🔥 🎉 Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统
Stars: ✭ 1,471 (+12.38%)
Mutual labels:  element-ui, vue3, vuex4, vue-router4, element-plus
vite-vue-admin
🎉🎉使用Vite + Vue3 + TypeScript + Element-plus + Mock开发的后台管理系统🎉🎉
Stars: ✭ 97 (-92.59%)
Mutual labels:  tsx, vue3, vite, element-plus
vue3-demo
💡 vue3新特性示例: 响应式API、组合式API、TodoMVC
Stars: ✭ 114 (-91.29%)
Mutual labels:  vue3, vite, vuex4, vue-router4
vue-next-admin
🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)
Stars: ✭ 1,002 (-23.45%)
Mutual labels:  element-ui, vue3, vite, element-plus
vue-3-stackter
A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences. Also, there is a TypeScript branch of this same setup.
Stars: ✭ 93 (-92.9%)
Mutual labels:  vue3, vite, vuex4, vue-router4
vue3-admin-vite
使用vue3.x+vite2.x+element Plus开发的具有主题切换,自定义主题颜色,布局风格切换
Stars: ✭ 37 (-97.17%)
Mutual labels:  vue3, vuex4, vue-router4, element-plus
bpmn-vue-activiti
基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器(Activiti process designer based on Vue3.x + Vite + BPMN-JS + Element-Plus + TSX implementation)
Stars: ✭ 345 (-73.64%)
Mutual labels:  tsx, vue3, vite, element-plus
vue3.0-template-admin
本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景,抽象出常见功能组件;包括动态菜单,菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等
Stars: ✭ 500 (-61.8%)
Mutual labels:  element-ui, vue3, vite, element-plus
Brick Design
全场景流式布局,可视化拖拽、随意嵌套组合、实时渲染、实时辅助线展示,实时组件间距展示、实时拖拽排序、状态域管理,可视化属性配置、可视化样式配置、多设备适配展示,支持逻辑渲染、模板字符变量、表达式、自定义方法、自定义状态
Stars: ✭ 4,048 (+209.24%)
Mutual labels:  drag-and-drop, low-code, nocode, lowcode
vue-vben-admin
A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!
Stars: ✭ 12,169 (+829.64%)
Mutual labels:  tsx, vue3, vite
vue-lite-admin
a lite vue3.0 admin template,there is no typescript and vuex (但注释挺全)
Stars: ✭ 67 (-94.88%)
Mutual labels:  vue3, vite, element-plus
vue-devui-early
Vue3版本的DevUI组件库。本仓库已迁移至:https://github.com/DevCloudFE/vue-devui
Stars: ✭ 39 (-97.02%)
Mutual labels:  tsx, vue3, vite
Admin-Frame-Vue3
基于Vue3 + Element-Plus + Vite 开发的中/后台管理系统
Stars: ✭ 181 (-86.17%)
Mutual labels:  element-ui, vue3, vite
fastadmin
vue3 + element-plus fast admin scaffold, 基于vue3和ElementPlus的中后台快速应用脚手架
Stars: ✭ 50 (-96.18%)
Mutual labels:  vue3, vite, element-plus
vue3-webpack-boilerplate
Vue 3 Webpack Boilerplate (Vue 3, Vue Router 4, Vuex 4, Typescript)
Stars: ✭ 69 (-94.73%)
Mutual labels:  vue3, vuex4, vue-router4
H5 Dooring
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Stars: ✭ 5,832 (+345.53%)
Mutual labels:  drag-and-drop, low-code, lowcode
vue3-smooth-dnd
Vue3 wrapper components for smooth-dnd
Stars: ✭ 92 (-92.97%)
Mutual labels:  drag-and-drop, draggable, vue3
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-98.01%)
Mutual labels:  element-ui, vue3, element-plus
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+890.22%)
Mutual labels:  element-ui, vue3, element-plus
el-table-draggable
让element-ui的table可拖动排序,支持 行,列,跨表格等特性
Stars: ✭ 68 (-94.81%)
Mutual labels:  drag-and-drop, draggable, element-ui

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

license

中文 | English

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

PS: 此项目为个人半年以前做的实验性小玩具,使用的都是最新的技术栈,后面由于个人时间问题,没有持续维护和完善,暂时计划于2022年下半年开始对项目进行整体的重构和重新设计,实现一个基本可用的简易低代码平台。感谢关注~

计划实现:

  • 操作历史快照
  • 支持生成 vue 模板组件
  • 生成组件大纲树
  • 提供常见的表单和列表模板
  • v-for 绑定数据源
  • 在 sandbox 中执行自定义逻辑
  • 基于 monaco-editor 自定义代码补全规则
  • 基于 vue3 createRenderer 自定义渲染器
  • 使用 Schema 描述数据结构(因为 schema 可以生成校验函数)
  • (⊙o⊙)…想到再做了~

模型驱动的视图

从最简单的结构来看,一个模型驱动的视图体系包含以下要素:

  • 模型

    • 定义状态结构
    • 定义动作
  • 视图

    • 订阅状态
    • 触发动作

这是很简单的一种渲染模式,可以适用于大多数的场景。

克隆项目

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
cd vite-vue3-lowcode

pnpm install
  • run
pnpm serve
  • build
pnpm build

技术栈

功能清单

  • 动态添加页面
  • 拖拽式生成组件
  • 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

 Edge
IE
 Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
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 开发中
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].