vite vue3 lowcode

Baseado na plataforma de baixo código Vite2.x + Vue3.x + TypeScript H5

Chinês | Inglês

No momento, é apenas um modelo simples, e um sistema de mecanismo mais completo pode ser introduzido posteriormente. Amigos interessados ​​​​podem ajustá-lo de acordo com suas próprias necessidades. Através deste projeto, você poderá ser exposto a muitos novos recursos e jogabilidade interessantes do vue3.

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

Implementação do plano:

• Instantâneo do histórico de operações
• Suporte à geração de componentes de modelo vue
• Gerar árvore de contorno de componentes
• Fornece modelos comuns de formulário e lista
• fonte de dados de ligação v-for
• Execute lógica personalizada no sandbox
• Regras de preenchimento de código personalizadas baseadas no monaco-editor
• Renderizador personalizado baseado em vue3 createRenderer
• Use Schema para descrever a estrutura de dados (porque o esquema pode gerar funções de verificação)
• (⊙o⊙)… Farei isso de novo se pensar nisso~

visão orientada por modelo

A partir da estrutura mais simples, um sistema de visualização orientado por modelo contém os seguintes elementos:

• Modelo

  • Definir estrutura estadual
  • Definir ação

• visualizar

  • Status da assinatura
  • ação de gatilho

Este é um modo de renderização muito simples que pode ser aplicado à maioria das cenas.

Clonar projeto

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

pilha de tecnologia

• Linguagem de programação: TypeScript 4.x + JavaScript
• Ferramenta de construção: Vite 2.x
• Estrutura de front-end: Vue 3.x
• Ferramenta de roteamento: Vue Router 4.x
• Gerenciamento de estado: Vuex 4.x
• Estrutura de UI do PC: Element Plus
• Estrutura de UI H5: vantajosa
• Pré-compilação CSS: Stylus/Sass/Less
• Ferramenta HTTP: Axios
• Ferramenta Git Hook: husky + lint-staged
• Especificação de código: EditorConfig + Prettier + ESLint + Guia de estilo JavaScript do Airbnb
• Especificações de compromisso: Commitizen + Commitlint
• Teste de unidade: vue-test-utils + jest + vue-jest + ts-jest
• Implantação automatizada: GitHub Actions

Lista de recursos

• Adicionar páginas dinamicamente
• Geração de componentes com arrastar e soltar
• service worker + indexeddb implementa interação front-end sem servidor
• Gerenciamento de fonte de dados (suporta importação de JSON swagger para gerar modelos de dados e interfaces)
• Fornece funções predefinidas
• Mais embalagens de componentes
• outro...

Instruções simples

Ao usar um formulário atualmente, você precisa colocar os表单控件relevantes dentro表单容器e colocar按钮no表单容器e, em seguida, definir按钮的type como表单提交按钮. Em seguida, clique no botão enviar para automaticamente. colete o contêiner do formulário. Todos os campos e valores dentro dele.

Gere propriedades de componentes rapidamente

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

Demonstração parcial da função

Suporte ao navegador

Para desenvolvimento local, é recomendado usar o navegador Chrome 80+

Suporta navegadores modernos, não suporta IE

Ou seja	Borda	Firefox	Cromo	Safári
não suporta	últimas 2 versões	últimas 2 versões	últimas 2 versões	últimas 2 versões

Especificações de envio

• feat adiciona novos recursos
• fix problemas/BUG
• style estilo do código está relacionado e não tem impacto nos resultados da execução.
• otimização de perf /melhoria de desempenho
• refactor
• revert modificações
• test teste relacionado
• docs /notas
• build faz alterações no sistema de compilação ou nas dependências externas
• atualização de dependência chore /modificação de configuração de andaime, etc.
• melhorias no fluxo workflow
• Integração contínua ci
• types alterações no arquivo de definição de tipo
• wip está em desenvolvimento