Element Pro Crudダウンロード - Element Pro Crudソースコードのダウンロード

Element Pro Crud

その他のカテゴリー

1.0.0

ダウンロード

?エレメントプロクルード?

ElementProCrud は、CRUD を迅速に構築するための強力なツールです (時間があるときに vue3 バージョンを完全にアップグレードすることを検討します)

ドキュメント

書類のアドレス

デモ

ドメイン名とサーバーの有効期限が切れています...一時的に利用できません、申し訳ありません

始める

ElementProCrud 全体をインポートすることも、必要に応じてコンポーネントの一部のみをインポートすることもできます。まずは完全なElementProCrudの導入方法を紹介します。

完全な紹介

main.js に次の内容を記述します。

 npm i element-pro-crud -s

 import Vue from 'vue'
import ElementProCrud from 'element-pro-crud'
import ElementUI from 'element-ui'
import 'element-pro-crud/lib/css/pro-crud.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( ElementUI )
Vue . use ( ElementProCrud )

上記のコードにより、ElementProCrud の導入が完了します。スタイルファイルは別途インポートする必要があることに注意してください。

オンデマンドで紹介

babel-plugin-component の助けを借りて、プロジェクトのサイズを削減するために必要なコンポーネントのみを導入できます。

まず、babel-plugin-component をインストールします。

 npm install babel - plugin - component - D

次に、.babelrc を次のように変更します。

 {
  presets : [ '@vue/cli-plugin-babel/preset' ] ,
  plugins : [
    [
      'component' ,
      {
        libraryName : 'element-pro-crud' ,
        styleLibrary : {
          name : 'css' ,
          base : false ,
        } ,
      } ,
    ] ,
  ] ,
} ;

次に、FormDesigner や ProForm などの一部のコンポーネントのみを導入したい場合は、main.js に次の内容を記述します。

 import Vue from 'vue'
import { ProForm , FormDesigner } from 'element-pro-crud'

Vue . use ( ProForm )
Vue . use ( FormDesigner )
new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

グローバル構成

ElementProCrud を導入する場合、グローバル構成オブジェクトを渡すことができます。フォーム json および一般的な CRUD リクエストを取得するための axios リクエストメソッドを提供します。具体的な操作は以下の通りです。

 {
  getFormDetail: formName => AxiosPromise ( formJSON ) // 传入获取表单json的axios请求
  getTableDetail: tableName => AxiosPromise ( tableJSON ) // 传入获取表格json的axios请求
  crud: ( dml : DML , tableName : string , data ?: object , params ?: object ) =>
    AxiosPromise // 通用CRUD请求封装
}

詳細については、各コンポーネントのチュートリアルのドキュメントを参照してください。

CDN

現在、リソースの最新バージョンは cdn.jsdelivr.net/npm/element-pro-crud/lib から入手でき、ページに js および css ファイルを導入することで使用を開始できます。

cdn によって導入されたコンポーネント名の大文字と小文字はkebab-caseであることに注意してください。

グローバルな紹介

 <!-- import ElementProCrud CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/pro-crud.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import ElementProCrud -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/pro-crud.js " > </ script >

オンデマンドで紹介

たとえば、フォームデザイナーを別途導入する

 <!-- import FormDesigner CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/form-designer.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import FormDesigner -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/form-designer.js " > </ script >

コンポーネントリスト

コンポーネント名	説明する
`ProForm`	フォームビルダー
`ProTable`	テーブルビルダー
`CrudTable`	フォームの追加、削除、変更、クエリ
`FormDesigner`	フォームデザイナー
`TableDesigner`	テーブルデザイナー

サードパーティのライブラリ

コンポーネント名	説明する	バージョン番号	説明する	導入方法（CDN、NPMどちらでも導入可能）
要素 ui	エレミーUI	`^2.15.1`	element-pro-crud の前に導入する必要がある	https://unpkg.com/element-ui/lib/index.js
エース	コードオンラインエディター	`^1.4.12`	フォームデザイナー/テーブルデザイナーの使用法	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
tinymce	リッチテキストエディタ	`^4.7.5`	フォームデザイナー/テーブルデザイナーの使用法	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
eチャート	echarts チャート	`^5.0.1`	フォームデザイナー/テーブルデザイナーの使用法	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	ツリードロップダウンボックス	`^0.4.0`	フォームデザイナー/テーブルデザイナーの使用法	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js