Загрузка Element Pro Crud - Загрузка исходного кода Element Pro Crud

Element Pro Crud

Другие категории

1.0.0

Скачать

?ЭлементПроКруд?

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. Следует отметить, что файл стиля необходимо импортировать отдельно.

Представляем по требованию

С помощью babyl-plugin-comment мы можем ввести только те компоненты, которые нам нужны, чтобы уменьшить размер проекта.

Сначала установите компонент 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)
элемент-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
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/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