tmagic-editor - TMagic ビジュアライゼーション ビルディング プラットフォーム。

()

Created at: 2022-02-17 14:46:16
Language: TypeScript
License: NOASSERTION

Tマジック

TMagic ビジュアライゼーション ビルディング プラットフォーム。

  • 💪Vue 3.0 コンポジション API
  • 🔥TypeScriptで書かれています

ドキュメンテーション

ドキュメントについては、 https://tencent.github.io/tmagic-editor/docs/index.htmlに移動してください。

現在、ドキュメントは徐々に改善されています. ご不明な点がございましたら、問題をお送りください.

チュートリアル

遊び場体験

https://tencent.github.io/tmagic-editor/playground/index.html

環境整備

node.js >= 16

最初にpnpmをインストールします

$ npm install -g pnpm

次に、依存関係をインストールします

$ pnpm bootstrap

プロジェクトを実行する

注文の実行

$ pnpm playground

最後にブラウザで開く

http://localhost:8098/tmagic-editor/playground/

ルービック キューブ エディターのサンプル プロジェクトを入手できます

プロジェクト紹介

このプロジェクトでは、コア コンテンツ

packages/editor
はと、 および が提供
runtime
する各フロントエンド フレームワークに関連するランタイムと UI です。
packages/ui

  • packages
    ディレクトリに提供される内容はnpmパッケージの形で出力され、開発者は対応するパッケージをインストールすることで利用できます。
  • runtime
    は、当社が提供するエディターのアクティブ ページと、エディター エミュレーターで実行されているページ プロジェクトの例です。直接使用することも、参照して自分で実装することもできます。
  • playground
    は、単純なエディター プロジェクトの例です。
    packages
    つまり、およびコンテンツを使用
    runtime
    する統合プロジェクトです。開発者はプレイグラウンドを参照し、ルービック キューブが提供する機能を使用して、ビジネス サイドのニーズを満たすエディターを実装できます。

編集者

@tmagic/editor をインストールして使用することで、ルービック キューブ エディターをすばやく構築できます。

ルービックキューブのデモ

ページのレンダリング

runtime は、ルービック キューブが提供するページ レンダリング環境です。エディターで生成された DSL をロードすることにより、キューブ エディターが必要とする最終製品であるアクティブなページを取得できます。vue2/vue3/react のランタイムには複数のバージョンが用意されています。

ルービック キューブ エディターとランタイム レンダリング、および複雑なカスタム コンポーネントの開発を通じて、ルービック キューブ プロジェクトで複雑で美しいページを構築できます。

フォームのレンダリング

ルービック キューブのフォーム構成アイテムは、弊社が開発した element-ui をベースとした @tmagic/form を使用しており、 @tmagic/form は別の場所でも使用することができます。JS スキーマによって提供されるフォーム記述のレンダリングをサポートします。

使用する

プレイグラウンドのサンプル プロジェクトは、開発者向けに提供される基本的なアプリケーションの例です。開発者は、これに基づいて、または独自の実装を参照して、ルービック キューブに基づく視覚的な構築プラットフォームを構築できます。

参加して貢献する

良いコメントや提案があれば、Issue またはプル リクエストを送信して、ルービック キューブ ビジュアル エディターの開発エクスペリエンスの向上に貢献してください。
参照: CONTRIBUTING.md

グループ通信へようこ​​そ