Element Pro Crud

?ElementProCrud?

ElementProCrud est un outil puissant pour créer rapidement CRUD (j'envisagerai de mettre à niveau complètement la version vue3 quand j'aurai le temps)

Documentation

Adresse du document

Démo

Le nom de domaine et le serveur ont expiré... temporairement indisponibles, désolé

Commencer

Vous pouvez importer l'intégralité d'ElementProCrud, ou seulement certains composants selon vos besoins. Voyons d'abord comment présenter l'ElementProCrud complet.

Introduction complète

Écrivez le contenu suivant dans 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 )

Le code ci-dessus complète l'introduction d'ElementProCrud. Il convient de noter que le fichier de style doit être importé séparément.

Présenter sur demande

Avec l'aide de babel-plugin-component, nous ne pouvons introduire que les composants dont nous avons besoin pour réduire la taille du projet.

Tout d’abord, installez babel-plugin-component :

 npm install babel - plugin - component - D

Ensuite, modifiez .babelrc pour :

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

Ensuite, si vous souhaitez uniquement introduire certains composants, tels que FormDesigner et ProForm, écrivez le contenu suivant dans 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 )
} )

Configuration globale

Lors de l'introduction d'ElementProCrud, vous pouvez transmettre un objet de configuration globale. Fournit la méthode de requête axios pour obtenir le formulaire json et la requête CRUD générale. Les opérations spécifiques sont les suivantes :

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

Consultez la documentation du didacticiel pour chaque composant pour plus de détails.

CDN

Actuellement, la dernière version de la ressource peut être obtenue via cdn.jsdelivr.net/npm/element-pro-crud/lib Vous pouvez commencer à l'utiliser en introduisant les fichiers js et css sur la page.

Notez que la casse du nom du composant introduit par cdn est kebab-case

Présentation mondiale

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

Présenter sur demande

Par exemple, présentez le concepteur de formulaires séparément

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

Liste des composants

Nom du composant	illustrer
ProForm	générateur de formulaire
ProTable	constructeur de tableaux
CrudTable	Ajouter, supprimer, modifier, formulaire de requête
FormDesigner	concepteur de formulaires
TableDesigner	dessinateur de tables

Bibliothèques tierces

Nom du composant	illustrer	numéro de version	illustrer	Méthode d'introduction (soit CDN, soit NPM peuvent être introduits)
élément-ui	Interface utilisateur Ele.me	^2.15.1	Doit être introduit avant element-pro-crud	https://unpkg.com/element-ui/lib/index.js
as	Éditeur de codes en ligne	^1.4.12	Utilisation du Concepteur de formulaires/Concepteur de tables	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
minuscule	Éditeur de texte enrichi	^4.7.5	Utilisation du Concepteur de formulaires/Concepteur de tables	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
graphiques	graphique électronique	^5.0.1	Utilisation du Concepteur de formulaires/Concepteur de tables	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	Boîte déroulante d'arbre	^0.4.0	Utilisation du Concepteur de formulaires/Concepteur de tables	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js

développement local

 yarn

yarn start

Licence

LGPL

Copyright (c) 2020-présent, BoBoooooo