vite vue3 lowcode下載 - vite vue3 lowcode原始碼下載

vite vue3 lowcode

其他類別

1.0.0

下載

基於Vite2.x + Vue3.x + TypeScript H5 低程式碼平台

中文| English

目前還只是一個簡單的模板，後面可能會引入較為完善的機制系統，感興趣的小伙伴可以根據自己的需要去調整, 通過這個項目或許你可以接觸到vue3 很多有趣的新特性和玩法。

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

計劃實現：

操作歷史快照
支援生成vue 模板元件
生成元件大綱樹
提供常見的表單和清單模板
v-for 綁定資料來源
在sandbox 中執行自訂邏輯
基於monaco-editor 自訂程式碼補全規則
基於vue3 createRenderer 自訂渲染器
使用Schema 描述資料結構（因為schema 可以產生校驗函數）
(⊙o⊙)…想到再做了~

模型驅動的視圖

從最簡單的結構來看，一個模型驅動的視圖系統包含以下要素：

模型
- 定義狀態結構
- 定義動作
視圖
- 訂閱狀態
- 觸發動作

這是很簡單的一種渲染模式，可以適用於大多數的場景。

克隆項目

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

技術堆疊

程式語言：TypeScript 4.x + JavaScript
建置工具：Vite 2.x
前端框架：Vue 3.x
路由工具：Vue Router 4.x
狀態管理：Vuex 4.x
PC 端UI 框架：Element Plus
H5 端UI 框架：vant
CSS 預編譯：Stylus / Sass / Less
HTTP 工具：Axios
Git Hook 工具：husky + lint-staged
程式碼規格：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
提交規範：Commitizen + Commitlint
單元測試：vue-test-utils + jest + vue-jest + ts-jest
自動部署：GitHub Actions

功能清單

動態新增頁面
拖曳式產生元件
service worker + indexeddb 實作無服務端的前端交互
資料來源管理(支援導入swagger JSON 產生資料模型及介面)
提供預置函數
更多組件的封裝
其他...

簡易說明

目前在使用表單時，需要把相關的表单控件放到表单容器內部，需要將按钮放到表单容器內，然後再講按钮的type設定為表单提交按钮這時點選提交按鈕才會自動收集表單容器內部的所有欄位和值

快速生成組件屬性

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