# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
[![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
**中文** | [English](./README.EN.md)
### 目前还只是一个简单的模板,后面可能会引入较为完善的机制系统,感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以接触到 vue3 很多有趣的新特性和玩法。
` PS: 此项目为个人半年以前做的实验性小玩具,使用的都是最新的技术栈,后面由于个人时间问题,没有持续维护和完善,暂时计划于2022年下半年开始对项目进行整体的重构和重新设计,实现一个基本可用的简易低代码平台。感谢关注~`
## 计划实现:
- 操作历史快照
- 支持生成 vue 模板组件
- 生成组件大纲树
- 提供常见的表单和列表模板
- v-for 绑定数据源
- 在 sandbox 中执行自定义逻辑
- 基于 monaco-editor 自定义代码补全规则
- 基于 vue3 createRenderer 自定义渲染器
- 使用 Schema 描述数据结构(因为 schema 可以生成校验函数)
- (⊙o⊙)…想到再做了~
### 模型驱动的视图
从最简单的结构来看,一个模型驱动的视图体系包含以下要素:
- 模型
- 定义状态结构
- 定义动作
- 视图
- 订阅状态
- 触发动作
这是很简单的一种渲染模式,可以适用于大多数的场景。
## 克隆项目
```shell
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
```
```bash
cd vite-vue3-lowcode
pnpm install
```
- run
```bash
pnpm serve
```
- build
```bash
pnpm build
```
## 技术栈
- 编程语言:[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
- 构建工具:[Vite 2.x](https://cn.vitejs.dev/)
- 前端框架:[Vue 3.x](https://v3.cn.vuejs.org/)
- 路由工具:[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
- 状态管理:[Vuex 4.x](https://next.vuex.vuejs.org/)
- PC 端 UI 框架:[Element Plus](https://element-plus.org/#/zh-CN)
- H5 端 UI 框架:[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
- CSS 预编译:[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
- HTTP 工具:[Axios](https://axios-http.com/)
- Git Hook 工具:[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
- 代码规范:[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
- 提交规范:[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
- 单元测试:[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
- 自动部署:[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
### 功能清单
- [x] 动态添加页面
- [x] 拖拽式生成组件
- [ ] service worker + indexeddb 实现无服务端的前端交互
- [ ] 数据源管理(支持导入 swagger JSON 生成数据模型及接口)
- [ ] 提供预置函数
- [ ] 更多组件的封装
- [ ] 其他...
### 简易说明
目前在使用表单时,需要把相关的`表单控件`放到`表单容器`内部,并且需要将`按钮`放到`表单容器`内,然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
### 快速生成组件属性
```javascript
// 在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('"', '');
```
```javascript
// 在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](https://z3.ax1x.com/2021/07/07/RHfBbn.gif)](https://imgtu.com/i/RHfBbn)
## 浏览器支持
本地开发推荐使用`Chrome 80+` 浏览器
支持现代浏览器, 不支持 IE
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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` 开发中
没有合适的资源?快使用搜索试试~ 我知道了~
基于 Vite2 H5 低代码平台
共167个文件
ts:59个
tsx:46个
vue:16个
需积分: 0 0 下载量 40 浏览量
2024-05-27
21:47:43
上传
评论
收藏 309KB ZIP 举报
温馨提示
动态添加页面 拖拽式生成组件 service worker + indexeddb 实现无服务端的前端交互 数据源管理(支持导入 swagger JSON 生成数据模型及接口) 提供预置函数 更多组件的封装
资源推荐
资源详情
资源评论
收起资源包目录
基于 Vite2 H5 低代码平台 (167个子文件)
.browserslistrc 50B
commit-msg 116B
.env.development 220B
.editorconfig 572B
.eslintignore 166B
.gitattributes 176B
.gitignore 737B
index.html 415B
index.html 407B
favicon.ico 4KB
.cz-config.js 3KB
.eslintrc.js 3KB
stylelint.config.js 2KB
commitlint.config.js 678B
prettier.config.js 215B
package.json 5KB
settings.json 3KB
tsconfig.json 1KB
extensions.json 263B
launch.json 252B
LICENSE 1KB
README.EN.md 7KB
README.md 7KB
.npmrc 101B
logo.png 59KB
pre-commit 189B
.prettierignore 72B
.env.production 238B
index.module.scss 1KB
animate.module.scss 1KB
func.scss 1KB
index.module.scss 753B
index.module.scss 753B
dropdown-sservice.scss 475B
styles.module.scss 350B
common.scss 349B
MonacoEditor.module.scss 327B
index.module.scss 174B
index.module.scss 159B
index.module.scss 100B
common.sh 179B
.stylelintignore 27B
github.svg 2KB
gitee.svg 906B
animateConfig.ts 9KB
visual-editor.utils.ts 8KB
useVisualData.ts 7KB
command.plugin.ts 5KB
vite.config.ts 5KB
createFieldProps.ts 5KB
auto-imports.d.ts 3KB
request.ts 3KB
utils.d.ts 3KB
compProps.ts 3KB
is.ts 2KB
fontArr.ts 2KB
global.d.ts 2KB
useAnimate.ts 2KB
components.d.ts 2KB
createFieldProps.ts 2KB
createFieldProps.ts 1KB
shims-app.d.ts 1KB
element-plus.ts 1KB
index.d.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
createFieldProps.ts 1KB
monaco.ts 1KB
windi.config.ts 1004B
vue-router.d.ts 992B
router.ts 915B
index.d.ts 838B
keyboard-code.ts 830B
main.ts 721B
index.ts 669B
useGlobalProperties.ts 669B
httpEnum.ts 650B
httpEnum.ts 650B
shims-vue.d.ts 645B
env.d.ts 539B
index.ts 500B
index.ts 481B
index.ts 469B
index.ts 450B
useDotProp.ts 436B
index.ts 436B
defer.ts 402B
event.ts 397B
index.ts 396B
main.ts 390B
modules.d.ts 389B
shims-tsx.d.ts 366B
vuex.d.ts 310B
index.ts 245B
vant.ts 191B
共 167 条
- 1
- 2
资源评论
aplyhj
- 粉丝: 2
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功