Unduhan Element Pro Crud - Unduhan kode sumber Element Pro Crud

Element Pro Crud

Kategori lainnya

1.0.0

Unduh

?ElemenProCrud?

ElementProCrud adalah alat yang ampuh untuk membangun CRUD dengan cepat (saya akan mempertimbangkan untuk mengupgrade versi vue3 sepenuhnya ketika saya punya waktu)

Dokumentasi

Alamat dokumen

Demo

Nama domain & server telah kedaluwarsa... untuk sementara tidak tersedia, maaf

Awal

Anda dapat mengimpor seluruh ElementProCrud, atau hanya beberapa komponen sesuai kebutuhan. Pertama mari kita perkenalkan cara memperkenalkan ElementProCrud secara lengkap.

Pengenalan lengkap

Tulis konten berikut di 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 )

Kode di atas melengkapi pengenalan ElementProCrud. Perlu dicatat bahwa file gaya perlu diimpor secara terpisah.

Perkenalkan sesuai permintaan

Dengan bantuan babel-plugin-component, kami hanya dapat memperkenalkan komponen yang kami perlukan untuk mengurangi ukuran proyek.

Pertama, instal komponen-plugin-babel:

 npm install babel - plugin - component - D

Kemudian, ubah .babelrc menjadi:

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

Selanjutnya, jika Anda hanya ingin memperkenalkan beberapa komponen, seperti FormDesigner dan ProForm, tulis konten berikut di 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 )
} )

Konfigurasi global

Saat memperkenalkan ElementProCrud, Anda dapat meneruskan objek konfigurasi global. Menyediakan metode permintaan aksio untuk mendapatkan formulir json dan permintaan CRUD umum. Operasi spesifiknya adalah sebagai berikut:

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

Lihat dokumentasi tutorial untuk setiap komponen untuk detailnya.

CDN

Saat ini, sumber daya versi terbaru dapat diperoleh melalui cdn.jsdelivr.net/npm/element-pro-crud/lib. Anda dapat mulai menggunakannya dengan memasukkan file js dan css di halaman.

Perhatikan bahwa case nama komponen yang diperkenalkan oleh cdn adalah kebab-case

Pengenalan global

 <!-- 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 >

Perkenalkan sesuai permintaan

Misalnya, perkenalkan perancang formulir secara terpisah

 <!-- 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 >

Daftar komponen

Nama komponen	menjelaskan
`ProForm`	pembuat formulir
`ProTable`	pembuat meja
`CrudTable`	Menambah, menghapus, mengubah, formulir kueri
`FormDesigner`	perancang bentuk
`TableDesigner`	perancang meja

Perpustakaan pihak ketiga

Nama komponen	menjelaskan	nomor versi	menjelaskan	Metode pengenalan (CDN atau NPM dapat diperkenalkan)
elemen-ui	Ele.me UI	`^2.15.1`	Perlu diperkenalkan sebelum elemen-pro-crud	https://unpkg.com/element-ui/lib/index.js
kartu as	Editor kode online	`^1.4.12`	Penggunaan Perancang Formulir/Perancang Tabel	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
kecil sekali	Editor teks kaya	`^4.7.5`	Penggunaan Perancang Formulir/Perancang Tabel	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
grafik	bagan diagram	`^5.0.1`	Penggunaan Perancang Formulir/Perancang Tabel	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	Kotak tarik-turun pohon	`^0.4.0`	Penggunaan Perancang Formulir/Perancang Tabel	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js