Element Pro Crud

?ElementProCrud?

ElementProCrud is a powerful tool for quickly building CRUD (I will consider fully upgrading the vue3 version when I have time)

Documentation

Document address

Demo

Domain name & server have expired... temporarily unavailable, sorry

Start

You can import the entire ElementProCrud, or only some of the components as needed. Let's first introduce how to introduce the complete ElementProCrud.

Complete introduction

Write the following content in 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 )

The above code completes the introduction of ElementProCrud. It should be noted that the style file needs to be imported separately.

Introduce on demand

With the help of babel-plugin-component, we can only introduce the components we need to reduce the size of the project.

First, install babel-plugin-component:

 npm install babel - plugin - component - D

Then, modify .babelrc to:

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

Next, if you only want to introduce some components, such as FormDesigner and ProForm, write the following content in 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 )
} )

Global configuration

When introducing ElementProCrud, you can pass in a global configuration object. Provides axios request method for obtaining form json and general CRUD request. The specific operations are as follows:

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

See the tutorial documentation for each component for details.

CDN

Currently, the latest version of the resource can be obtained through cdn.jsdelivr.net/npm/element-pro-crud/lib. You can start using it by introducing js and css files on the page.

Note that the case of the component name introduced by cdn is kebab-case

Global introduction

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

Introduce on demand

For example, introduce the form designer separately

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

Component list

Component name	illustrate
ProForm	form builder
ProTable	table builder
CrudTable	Add, delete, modify, query form
FormDesigner	form designer
TableDesigner	table designer

Third-party libraries

Component name	illustrate	version number	illustrate	Introduction method (either CDN or NPM can be introduced)
element-ui	Ele.me UI	^2.15.1	Need to be introduced before element-pro-crud	https://unpkg.com/element-ui/lib/index.js
ace	Code online editor	^1.4.12	Form Designer/Table Designer Usage	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
tinymce	Rich text editor	^4.7.5	Form Designer/Table Designer Usage	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
echarts	echarts chart	^5.0.1	Form Designer/Table Designer Usage	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	Tree drop-down box	^0.4.0	Form Designer/Table Designer Usage	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js

local development

 yarn

yarn start

License

LGPL

Copyright (c) 2020-present, BoBoooooo