Element Pro Crud下載 - Element Pro Crud原始碼下載

Element Pro Crud

其他類別

1.0.0

下載

? ElementProCrud ?

ElementProCrud 快速搭建CRUD 的利器(抽空會考慮全面升級vue3版本)

Documentation

文件地址

Demo

網域&伺服器已過期...暫時沒辦法訪問，抱歉

Start

你可以引入整個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 的axios 請求方法以及通用CRUD 請求。具體操作如下：

 {
  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 引入均可)
element-ui	餓了麼UI	`^2.15.1`	需在element-pro-crud 之前引入	https://unpkg.com/element-ui/lib/index.js
ace	程式碼線上編輯器	`^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
echarts	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