تنزيل Element Pro Crud - تنزيل كود مصدر Element Pro Crud

Element Pro Crud

فئات أخرى

1.0.0

تنزيل

؟ElementProCrud؟

تعد 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:

 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

حاليًا، يمكن الحصول على أحدث إصدار من المورد من خلال 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	واجهة المستخدم Ele.me	`^2.15.1`	يجب تقديمه قبل العنصر المؤيد للخام	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
الرسوم البيانية	مخطط الرسوم البيانية	`^5.0.1`	استخدام مصمم النموذج/مصمم الجدول	https://cdn.bootcdn.net/ajax/libs/ecarts/5.0.1/ecarts.min.js
vue-treeselect	مربع الشجرة المنسدل	`^0.4.0`	استخدام مصمم النموذج/مصمم الجدول	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js