vite vue3 lowcode

Basado en la plataforma de código bajo Vite2.x + Vue3.x + TypeScript H5

chino | inglés

En la actualidad, es solo una plantilla simple, y es posible que más adelante se presente un sistema de mecanismo más completo. Los amigos interesados ​​pueden ajustarlo según sus propias necesidades. A través de este proyecto, usted puede estar expuesto a muchas características y jugabilidad nuevas e interesantes de vue3.

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

Implementación del plan:

• Instantánea del historial de operaciones
• Soporte para generar componentes de plantilla vue
• Generar árbol de esquema de componentes
• Proporciona plantillas de listas y formularios comunes
• v-para fuente de datos de enlace
• Ejecutar lógica personalizada en el sandbox
• Reglas de finalización de código personalizadas basadas en monaco-editor
• Renderizador personalizado basado en vue3 createRenderer
• Utilice Schema para describir la estructura de datos (porque el esquema puede generar funciones de verificación)
• (⊙o⊙)…lo haré de nuevo si lo pienso~

vista basada en modelos

Desde la estructura más simple, un sistema de vista basado en modelos contiene los siguientes elementos:

• Modelo

  • Definir la estructura estatal
  • Definir acción

• vista

  • Estado de suscripción
  • acción desencadenante

Este es un modo de renderizado muy simple que se puede aplicar a la mayoría de las escenas.

Clonar proyecto

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

• correr

pnpm serve

• construir

pnpm build

pila de tecnología

• Lenguaje de programación: TypeScript 4.x + JavaScript
• Herramienta de compilación: Vite 2.x
• Marco de interfaz de usuario: Vue 3.x
• Herramienta de enrutamiento: Vue Router 4.x
• Gestión de estados: Vuex 4.x
• Marco de interfaz de usuario de PC: Element Plus
• Marco de interfaz de usuario H5: vant
• Precompilación de CSS: Stylus/Sass/Less
• Herramienta HTTP: Axios
• Herramienta Git Hook: husky + lint-staged
• Especificación del código: EditorConfig + Prettier + ESLint + Guía de estilo de JavaScript de Airbnb
• Especificaciones de compromiso: Commitizen + Commitlint
• Prueba unitaria: vue-test-utils + jest + vue-jest + ts-jest
• Implementación automatizada: Acciones de GitHub

Lista de características

• Agregar páginas dinámicamente
• Generación de componentes de arrastrar y soltar
• service work + indexeddb implementa la interacción front-end sin servidor
• Gestión de fuentes de datos (admite la importación de JSON swagger para generar modelos e interfaces de datos)
• Proporcionar funciones preestablecidas
• Más embalaje de componentes
• otro...

Instrucciones simples

Cuando utiliza un formulario actualmente, debe colocar los表单控件relevantes dentro表单容器, y debe colocar按钮en表单容器y luego configurar按钮的type en表单提交按钮. Luego, haga clic en el botón enviar para automáticamente. recopile el contenedor del formulario. Todos los campos y valores dentro.

Genere rápidamente propiedades de componentes

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

Demostración de función parcial

Soporte del navegador

Para el desarrollo local, se recomienda utilizar el navegador Chrome 80+

Admite navegadores modernos, no es compatible con IE

ES DECIR	Borde	Firefox	Cromo	Safari
no apoyo	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones

Especificaciones de envío

• feat agrega nuevas características
• fix problemas/ERROR
• style estilo del código está relacionado y no tiene ningún impacto en los resultados de la ejecución.
• optimización perf /mejora del rendimiento
• refactor
• revert modificaciones
• test relacionada con la prueba
• docs /notas
• build realiza cambios en el sistema de compilación o dependencias externas
• actualización de dependencias chore /modificación de configuración de andamios, etc.
• mejoras en el flujo workflow
• Integración continua ci
• types cambios en el archivo de definición de tipo
• wip está en desarrollo