vite vue3 lowcode

Basé sur la plateforme low-code Vite2.x + Vue3.x + TypeScript H5

Chinois | Anglais

À l'heure actuelle, il ne s'agit que d'un simple modèle, et un système de mécanisme plus complet pourrait être introduit ultérieurement. Les amis intéressés peuvent l'ajuster en fonction de leurs propres besoins. Grâce à ce projet, vous pourrez être exposé à de nombreuses nouvelles fonctionnalités et gameplay intéressants de vue3.

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

Mise en œuvre du plan :

• Instantané de l'historique des opérations
• Prise en charge de la génération de composants de modèle de vue
• Générer une arborescence de composants
• Fournit des modèles courants de formulaires et de listes
• v-pour lier la source de données
• Exécuter une logique personnalisée dans le bac à sable
• Règles de complétion de code personnalisées basées sur monaco-editor
• Moteur de rendu personnalisé basé sur vue3 createRenderer
• Utilisez Schema pour décrire la structure des données (car le schéma peut générer des fonctions de vérification)
• (⊙o⊙)…Je le referai si j'y pense~

vue basée sur le modèle

À partir de la structure la plus simple, un système de vues piloté par modèle contient les éléments suivants :

• Modèle

  • Définir la structure de l'État
  • Définir l'action

• voir

  • Statut de l'abonnement
  • déclencher une action

Il s'agit d'un mode de rendu très simple qui peut être appliqué à la plupart des scènes.

Projet de clonage

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

• courir

pnpm serve

• construire

pnpm build

pile technologique

• Langage de programmation : TypeScript 4.x + JavaScript
• Outil de construction : Vite 2.x
• Framework front-end : Vue 3.x
• Outil de routage : Vue Router 4.x
• Gestion de l'état : Vuex 4.x
• Cadre d'interface utilisateur PC : Element Plus
• Cadre d'interface utilisateur H5 : vant
• Précompilation CSS : Stylus/Sass/Less
• Outil HTTP : Axios
• Outil Git Hook : husky + lint-staged
• Spécification du code : EditorConfig + Prettier + ESLint + Guide de style JavaScript Airbnb
• Spécifications d'engagement : Commitizen + Commitlint
• Test unitaire : vue-test-utils + plaisanterie + vue-jest + ts-jest
• Déploiement automatisé : actions GitHub

Liste des fonctionnalités

• Ajouter dynamiquement des pages
• Génération de composants par glisser-déposer
• service worker + indexeddb implémente une interaction frontale sans serveur
• Gestion des sources de données (prend en charge l'importation de swagger JSON pour générer des modèles de données et des interfaces)
• Fournir des fonctions prédéfinies
• Plus d'emballage de composants
• autre...

Instructions simples

Lorsque vous utilisez actuellement un formulaire, vous devez placer les表单控件pertinents dans表单容器, et vous devez placer按钮dans表单容器, puis définir按钮的type sur表单提交按钮. Cliquez ensuite sur le bouton Soumettre automatiquement. récupérez le conteneur de formulaire. Tous les champs et valeurs à l'intérieur.

Générez rapidement les propriétés des composants

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

Démonstration partielle des fonctions

Prise en charge du navigateur

Pour le développement local, il est recommandé d'utiliser le navigateur Chrome 80+

Prend en charge les navigateurs modernes, ne prend pas en charge IE

IE	Bord	Firefox	Chrome	Safari
ne supporte pas	les 2 dernières versions	les 2 dernières versions	les 2 dernières versions	les 2 dernières versions

Spécifications de soumission

• feat ajoute de nouvelles fonctionnalités
• fix les problèmes/BUG
• style style de code est lié et n'a aucun impact sur les résultats d'exécution.
• optimisation perf /amélioration des performances
• refactor
• revert les modifications
• test lié au test
• docs /notes
• build apporte des modifications au système de build ou aux dépendances externes
• mise à jour des dépendances chore /modification de la configuration de l'échafaudage, etc.
• améliorations du flux workflow
• Intégration continue ci
• types modifications du fichier de définition de type
• wip est en cours de développement