ดาวน์โหลด Element Pro Crud - ดาวน์โหลดซอร์สโค้ด Element Pro Crud

Element Pro Crud

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

?องค์ประกอบProCrud?

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 คุณสามารถส่งผ่านออบเจ็กต์การกำหนดค่าส่วนกลางได้ จัดให้มีวิธีการร้องขอ axios สำหรับการรับแบบฟอร์ม json และคำขอ 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.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 ของ Ele.me	`^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
จิ๋วๆ	โปรแกรมแก้ไขข้อความที่หลากหลาย	`^4.7.5`	การใช้โปรแกรมออกแบบฟอร์ม/โปรแกรมออกแบบตาราง	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
อีชาร์ต	แผนภูมิ 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