vite vue3 lowcode Download - vite vue3 lowcode Source code download

vite vue3 lowcode

Other categories

1.0.0

Download

Based on Vite2.x + Vue3.x + TypeScript H5 low-code platform

Chinese | English

At present, it is just a simple template, and a more complete mechanism system may be introduced later. Interested friends can adjust it according to their own needs. Through this project, you may be exposed to many interesting new features and gameplay of vue3.

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

Plan implementation:

Operation history snapshot
Support generating vue template components
Generate component outline tree
Provides common form and list templates
v-for bind data source
Execute custom logic in the sandbox
Custom code completion rules based on monaco-editor
Custom renderer based on vue3 createRenderer
Use Schema to describe the data structure (because schema can generate verification functions)
(⊙o⊙)…I’ll do it again if I think of it~

model-driven view

From the simplest structure, a model-driven view system contains the following elements:

Model
- Define state structure
- Define action
view
- Subscription status
- trigger action

This is a very simple rendering mode that can be applied to most scenes.

Clone project

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

technology stack

Programming language: TypeScript 4.x + JavaScript
Build tool: Vite 2.x
Front-end framework: Vue 3.x
Routing tool: Vue Router 4.x
State management: Vuex 4.x
PC UI framework: Element Plus
H5 UI framework: vant
CSS precompilation: Stylus/Sass/Less
HTTP Tool: Axios
Git Hook tool: husky + lint-staged
Code specification: EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
Commitment specifications: Commitizen + Commitlint
Unit test: vue-test-utils + jest + vue-jest + ts-jest
Automated deployment: GitHub Actions

Feature list

Dynamically add pages
Drag-and-drop component generation
service worker + indexeddb implements serverless front-end interaction
Data source management (supports importing swagger JSON to generate data models and interfaces)
Provide preset functions
More component packaging
other...

Simple instructions

When using a form currently, you need to put the relevant表单控件inside表单容器, and you need to put按钮into表单容器, and then set按钮的type to表单提交按钮. Then click the submit button to automatically collect the form container. All fields and values inside

Quickly generate component properties

 // 在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 , "'" ) ;