vite vue3 lowcode

Vite2.x + Vue3.x + TypeScript H5 ローコード プラットフォームに基づく

中国語| 英語

現時点では単なるテンプレートにすぎませんが、興味のある友人は、このプロジェクトを通じて、vue3 の多くの興味深い新機能とゲームプレイを知ることができるでしょう。

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

計画の実施:

• 操作履歴のスナップショット
• Vue テンプレート コンポーネントの生成をサポート
• コンポーネントアウトラインツリーの生成
• 共通のフォームとリストのテンプレートを提供します
• v-バインドデータソース用
• サンドボックスでカスタム ロジックを実行する
• monaco-editor に基づくカスタム コード補完ルール
• vue3 createRenderer に基づくカスタム レンダラー
• スキーマを使用してデータ構造を記述します (スキーマは検証関数を生成できるため)
• (⊙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

• 走る

pnpm serve

• 建てる

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 ツール: ハスキー + lint ステージング
• コード仕様: EditorConfig + Prettier + ESLint + Airbnb JavaScript スタイルガイド
• コミットメント仕様: Commitizen + Commitlint
• 単体テスト: vue-test-utils + jest + vue-jest + ts-jest
• 自動デプロイ: GitHub アクション

機能一覧

• ページを動的に追加する
• ドラッグアンドドロップによるコンポーネントの生成
• 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 , "'" ) ; 

一部機能デモ

ブラウザのサポート

ローカル開発の場合は、 Chrome 80+ブラウザを使用することをお勧めします。

最新のブラウザをサポートしますが、IE はサポートしません

IE	角	Firefox	クロム	サファリ
サポートしません	過去 2 つのバージョン	過去 2 つのバージョン	過去 2 つのバージョン	過去 2 つのバージョン

提出仕様書

• feat新機能を追加します
• fix問題/バグfix
• styleコード スタイルは関連しており、実行結果には影響しません。
• perf最適化/パフォーマンスの向上
• refactor
• 元に戻す変更をrevert
• testテスト関連
• docs /ノート
• buildビルド システムまたは外部依存関係に変更を加えます
• 依存関係chore更新/スキャフォールディング構成の変更などの雑務。
• workflowワークフローの改善
• ci継続的インテグレーション
• typesタイプ定義ファイルの変更
• wip開発中です