Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/buqiyuan/vite-vue3-lowcode

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

demo design drag-and-drop draggable element-plus element-ui low-code lowcode monaco-editor nocode ts tsx typescript vant-ui vite vue vue-router4 vue3 vuex4

Last synced: 3 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/buqiyuan/vite-vue3-lowcode
Owner: buqiyuan
License: mit
Created: 2021-04-19T07:16:18.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-08-20T10:54:56.000Z (4 months ago)
Last Synced: 2024-12-11T13:07:59.422Z (10 days ago)
Topics: demo, design, drag-and-drop, draggable, element-plus, element-ui, low-code, lowcode, monaco-editor, nocode, ts, tsx, typescript, vant-ui, vite, vue, vue-router4, vue3, vuex4
Language: TypeScript
Homepage: https://buqiyuan.github.io/vite-vue3-lowcode
Size: 3.46 MB
Stars: 3,207
Watchers: 98
Forks: 780
Open Issues: 26
Metadata Files:
- Readme: README.EN.md
- License: LICENSE

Awesome Lists containing this project

Awesome-GitHub-Repo - vite-vue3-lowcode - vue3.x vite2.x vant element-plus H5 移动端低代码平台 lowcode 可视化拖拽可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具。[<img src="https://tva1.sinaimg.cn/large/008i3skNly1gxlhtmg11mj305k05k746.jpg" alt="微信" width="18px" height="18px" />](https://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA==&mid=2247503159&idx=1&sn=3f6b3f79511e13feda4022d0771118c1&chksm=f9a21efeced597e8f38aeae6122da86f89c80171d09df20db9f6881a29dfe602921720be56d5&scene=21#wechat_redirect) (实战项目 / 低代码项目)
awesome-lesscode - vite-vue3-lowcode - plus H5移动端低代码平台 lowcode 可视化拖拽 [![GitHub stars](https://img.shields.io/github/stars/buqiyuan/vite-vue3-lowcode)](https://github.com/buqiyuan/vite-vue3-lowcode) ![GitHub last commit](https://img.shields.io/github/last-commit/buqiyuan/vite-vue3-lowcode?label=%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4) (精选 LessCode 项目)

README

        # base on Vite2.x + Vue3.x + TypeScript H5 Low code platform

[![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)

**English** | [中文](./README.md)

## Clone the main branch and ignore irrelevant branches such as git-pages

```shell

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

```

## technology stack

- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)

- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)

- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)

- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)

- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)

- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)

- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)

- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)

- HTTP Tool：[Axios](https://axios-http.com/)

- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)

- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)

- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)

- Unit Testing：[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/)

- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)

### Function List

- [x] Add pages dynamically

- [x] Drag and drop components

- [ ] service worker + indexeddb Implement server-free front-end interaction

- [ ] DataSource Admin Console

- [ ] Provide preset functions

- [ ] More component encapsulation

- [ ] Others...

### Generate component properties quickly

```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(/(?](http://godban.github.io/browsers-support-badges/)IE | [](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |

| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |

### Git Contribution submission specification

- `feat` Add new features

- `fix` Fix the problem/BUG

- `style` The code style is related and does not affect the running result

- `perf` Optimization/performance improvement

- `refactor` Refactor

- `revert` Undo edit

- `test` Test related

- `docs` Documentation/notes

- `chore` Dependency update/scaffolding configuration modification etc.

- `workflow` Workflow improvements

- `ci` Continuous integration

- `types` Type definition file changes

- `wip` In development

## QUICK START

### Install and use

```sh

npm install

# or

yarn add

```

### run

```sh

npm run dev

```

### build

```sh

npm run build

```