Descarga de Element Pro Crud - Descarga del código fuente de Element Pro Crud

Element Pro Crud

Otras categorias

1.0.0

Descargar

?ElementoProCrud?

ElementProCrud es una herramienta poderosa para construir CRUD rápidamente (consideraré actualizar completamente la versión vue3 cuando tenga tiempo)

Documentación

Dirección del documento

Manifestación

El nombre de dominio y el servidor han caducado... temporalmente no disponibles, lo siento

Comenzar

Puede importar el ElementProCrud completo o solo algunos de los componentes según sea necesario. Primero introduzcamos cómo presentar el ElementProCrud completo.

Introducción completa

Escriba el siguiente contenido en 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 )

El código anterior completa la introducción de ElementProCrud. Cabe señalar que el archivo de estilo debe importarse por separado.

Introducir bajo demanda

Con la ayuda de babel-plugin-component, solo podemos introducir los componentes que necesitamos para reducir el tamaño del proyecto.

Primero, instale el componente-plugin-babel:

 npm install babel - plugin - component - D

Luego, modifique .babelrc para:

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

A continuación, si solo desea presentar algunos componentes, como FormDesigner y ProForm, escriba el siguiente contenido en 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 )
} )

Configuración global

Al presentar ElementProCrud, puede pasar un objeto de configuración global. Proporciona un método de solicitud de axios para obtener el formulario json y la solicitud CRUD general. Las operaciones específicas son las siguientes:

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

Consulte la documentación del tutorial de cada componente para obtener más detalles.

CDN

Actualmente, la última versión del recurso se puede obtener a través de cdn.jsdelivr.net/npm/element-pro-crud/lib. Puede comenzar a usarlo introduciendo archivos js y css en la página.

Tenga en cuenta que el caso del nombre del componente introducido por cdn es kebab-case

Introducción 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 >

Introducir bajo demanda

Por ejemplo, presente al diseñador de formularios por separado.

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

Lista de componentes

Nombre del componente	ilustrar
`ProForm`	constructor de formularios
`ProTable`	constructor de mesas
`CrudTable`	Agregar, eliminar, modificar, formulario de consulta
`FormDesigner`	diseñador de formularios
`TableDesigner`	diseñador de mesa

Bibliotecas de terceros

Nombre del componente	ilustrar	número de versión	ilustrar	Método de introducción (se puede introducir CDN o NPM)
elemento-ui	Interfaz de usuario de Ele.me	`^2.15.1`	Es necesario presentarlo antes de element-pro-crud.	https://unpkg.com/element-ui/lib/index.js
as	Editor de código en línea	`^1.4.12`	Uso del Diseñador de formularios/Diseñador de tablas	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
Tinymce	editor de texto enriquecido	`^4.7.5`	Uso del Diseñador de formularios/Diseñador de tablas	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
echarts	gráfico de echarts	`^5.0.1`	Uso del Diseñador de formularios/Diseñador de tablas	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	Cuadro desplegable de árbol	`^0.4.0`	Uso del Diseñador de formularios/Diseñador de tablas	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js