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-comfort의 도움으로 프로젝트 규모를 줄이는 데 필요한 구성요소만 도입할 수 있습니다.

먼저 babel-plugin-comfort를 설치하세요:

 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를 도입할 때 전역 구성 개체를 전달할 수 있습니다. Form json 및 일반 CRUD 요청을 얻기 위한 axios 요청 방법을 제공합니다. 구체적인 작업은 다음과 같습니다.

 {
  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	엘레.미 UI	`^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
작은	리치 텍스트 편집기	`^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