vite vue3 lowcode

Basierend auf der Low-Code-Plattform Vite2.x + Vue3.x + TypeScript H5

Chinesisch |. Englisch

Derzeit handelt es sich nur um eine einfache Vorlage, und interessierte Freunde können es später an ihre eigenen Bedürfnisse anpassen. Durch dieses Projekt können Sie viele interessante neue Funktionen und das Gameplay von vue3 kennenlernen.

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

Planumsetzung:

• Schnappschuss des Vorgangsverlaufs
• Unterstützung beim Generieren von Vue-Vorlagenkomponenten
• Erstellen Sie einen Komponenten-Gliederungsbaum
• Bietet gängige Formular- und Listenvorlagen
• v-für Bind-Datenquelle
• Führen Sie benutzerdefinierte Logik in der Sandbox aus
• Benutzerdefinierte Code-Vervollständigungsregeln basierend auf dem Monaco-Editor
• Benutzerdefinierter Renderer basierend auf vue3 createRenderer
• Verwenden Sie Schema, um die Datenstruktur zu beschreiben (da Schema Überprüfungsfunktionen generieren kann).
• (⊙o⊙)…Ich werde es wieder tun, wenn ich daran denke~

Modellgetriebene Sicht

Von der einfachsten Struktur her enthält ein modellgesteuertes Ansichtssystem die folgenden Elemente:

• Modell

  • Staatsstruktur definieren
  • Aktion definieren

• Sicht

  • Abonnementstatus
  • Aktion auslösen

Dies ist ein sehr einfacher Rendering-Modus, der auf die meisten Szenen angewendet werden kann.

Projekt klonen

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

• laufen

pnpm serve

• bauen

pnpm build

Technologie-Stack

• Programmiersprache: TypeScript 4.x + JavaScript
• Build-Tool: Vite 2.x
• Front-End-Framework: Vue 3.x
• Routing-Tool: Vue Router 4.x
• Zustandsverwaltung: Vuex 4.x
• PC-UI-Framework: Element Plus
• H5-UI-Framework: vant
• CSS-Vorkompilierung: Stylus/Sass/Less
• HTTP-Tool: Axios
• Git-Hook-Tool: Husky + Lint-Stadium
• Code-Spezifikation: EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
• Commitment-Spezifikationen: Commitizen + Commitlint
• Unit-Test: vue-test-utils + jest + vue-jest + ts-jest
• Automatisierte Bereitstellung: GitHub-Aktionen

Funktionsliste

• Fügen Sie Seiten dynamisch hinzu
• Generierung von Komponenten per Drag-and-Drop
• Service Worker + indexeddb implementiert serverlose Front-End-Interaktion
• Datenquellenverwaltung (unterstützt den Import von Swagger JSON zur Generierung von Datenmodellen und Schnittstellen)
• Stellen Sie voreingestellte Funktionen bereit
• Mehr Komponentenverpackung
• andere...

Einfache Anleitung

Wenn Sie derzeit ein Formular verwenden, müssen Sie die entsprechenden表单控件in表单容器einfügen,按钮in表单容器einfügen und dann按钮的type auf表单提交按钮festlegen. Klicken Sie dann auf die Schaltfläche „Senden“, um automatisch zu senden Sammeln Sie den Formularcontainer. Alle darin enthaltenen Felder und Werte

Generieren Sie schnell Komponenteneigenschaften

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

Teilweise Funktionsdemonstration

Browserunterstützung

Für die lokale Entwicklung wird die Verwendung des Browsers Chrome 80+ empfohlen

Unterstützt moderne Browser, unterstützt IE nicht

IE	Rand	Firefox	Chrom	Safari
nicht unterstützen	letzten 2 Versionen	letzten 2 Versionen	letzten 2 Versionen	letzten 2 Versionen

Einreichungsspezifikationen

• feat fügt neue Funktionen hinzu
• behebenProbleme/BUG fix
• style Codestil ist verwandt und hat keinen Einfluss auf die laufenden Ergebnisse.
• perf /Leistungsverbesserung
• refactor
• revertÄnderungen revert
• test testbezogen
• docs /Notizen
• build nimmt Änderungen am Build-System oder externen Abhängigkeiten vor
• Aktualisierung chore Abhängigkeiten/Änderung der Gerüstkonfiguration usw.
• workflow -Verbesserungen
• Kontinuierliche ci Integration
• Änderungen an der Typdefinitionsdatei von types
• wip ist in der Entwicklung