{"id":13783549,"url":"https://github.com/BoBoooooo/Element-Pro-Crud","last_synced_at":"2025-05-11T19:31:04.648Z","repository":{"id":37345091,"uuid":"244597472","full_name":"BoBoooooo/Element-Pro-Crud","owner":"BoBoooooo","description":"🚀 LowCode平台,配套表单,表格设计器,一键Crud🚀","archived":false,"fork":false,"pushed_at":"2023-09-02T09:06:40.000Z","size":2806,"stargazers_count":258,"open_issues_count":12,"forks_count":52,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-02T01:03:54.351Z","etag":null,"topics":["crudtable","el-form","element-ui","npm","typescript","vue","vue-class"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BoBoooooo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-03T09:43:51.000Z","updated_at":"2025-02-13T14:32:59.000Z","dependencies_parsed_at":"2024-01-15T05:11:21.051Z","dependency_job_id":"d0fdf58b-05bc-4be7-bf68-79a00b3b60c1","html_url":"https://github.com/BoBoooooo/Element-Pro-Crud","commit_stats":{"total_commits":358,"total_committers":3,"mean_commits":"119.33333333333333","dds":0.008379888268156388,"last_synced_commit":"f8a86c95978dcc62a55ddad0bd1c6dda284b53a2"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoBoooooo%2FElement-Pro-Crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoBoooooo%2FElement-Pro-Crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoBoooooo%2FElement-Pro-Crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BoBoooooo%2FElement-Pro-Crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BoBoooooo","download_url":"https://codeload.github.com/BoBoooooo/Element-Pro-Crud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253620997,"owners_count":21937457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crudtable","el-form","element-ui","npm","typescript","vue","vue-class"],"created_at":"2024-08-03T19:00:24.511Z","updated_at":"2025-05-11T19:31:04.287Z","avatar_url":"https://github.com/BoBoooooo.png","language":"Vue","funding_links":[],"categories":["精选 LessCode 项目"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"https://img.imgdb.cn/item/601a417c3ffa7d37b3d3b19a.png\"\u003e\n\u003c/p\u003e\n\n# 🎉 ElementProCrud 🎉\n\nElementProCrud 快速搭建 CRUD 的利器 (抽空会考虑全面升级vue3版本)\n\n[![NPM Version](http://img.shields.io/npm/v/element-pro-crud.svg?style=flat)](https://www.npmjs.org/package/element-pro-crud)\n[![NPM Downloads](https://img.shields.io/npm/dm/element-pro-crud.svg?style=flat)](https://www.npmjs.org/package/element-pro-crud)\n![](https://img.shields.io/badge/license-MIT-000000.svg)\n\n## Documentation\n[文档地址](http://procrud.fun/)\n## Demo\n\n**域名\u0026服务器已过期...暂时没法访问，抱歉**\n\n## Start\n\n你可以引入整个 ElementProCrud，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 ElementProCrud。\n\n### 完整引入\n\n在 main.js 中写入以下内容：\n\n```\nnpm i element-pro-crud -s\n```\n\n```javascript\nimport Vue from 'vue'\nimport ElementProCrud from 'element-pro-crud'\nimport ElementUI from 'element-ui'\nimport 'element-pro-crud/lib/css/pro-crud.css'\nimport 'element-ui/lib/theme-chalk/index.css'\n\nVue.use(ElementUI)\nVue.use(ElementProCrud)\n```\n\n以上代码便完成了 ElementProCrud 的引入。需要注意的是，样式文件需要单独引入。\n\n### 按需引入\n\n借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。\n\n首先，安装 [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component)：\n\n```javascript\nnpm install babel-plugin-component -D\n```\n\n然后，将 .babelrc 修改为：\n\n```javascript\n{\n  presets: ['@vue/cli-plugin-babel/preset'],\n  plugins: [\n    [\n      'component',\n      {\n        libraryName: 'element-pro-crud',\n        styleLibrary: {\n          name: 'css',\n          base: false,\n        },\n      },\n    ],\n  ],\n};\n```\n\n接下来，如果你只希望引入部分组件，比如 FormDesigner 和 ProForm main.js 中写入以下内容：\n\n```javascript\nimport Vue from 'vue'\nimport { ProForm, FormDesigner } from 'element-pro-crud'\n\nVue.use(ProForm)\nVue.use(FormDesigner)\nnew Vue({\n  el: '#app',\n  render: h =\u003e h(App)\n})\n```\n\n### 全局配置\n\n在引入 ElementProCrud 时，可以传入一个全局配置对象。提供了获取表单表格 json 的 axios 请求方法以及通用 CRUD 请求。具体操作如下：\n\n```javascript\n{\n  getFormDetail: formName =\u003e AxiosPromise(formJSON) // 传入获取表单json的axios请求\n  getTableDetail: tableName =\u003e AxiosPromise(tableJSON) // 传入获取表格json的axios请求\n  crud: (dml: DML, tableName: string, data?: object, params?: object) =\u003e\n    AxiosPromise // 通用CRUD请求封装\n}\n```\n\n详见各个组件教程文档。\n\n## CDN\n\n目前可以通过 [cdn.jsdelivr.net/npm/element-pro-crud/lib](https://cdn.jsdelivr.net/npm/element-pro-crud/lib/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。\n\n**注意 cdn 引入组件名大小写为`kebab-case`**\n\n### 全局引入\n\n```html\n\u003c!-- import ElementProCrud CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/pro-crud.css\" /\u003e\n\u003c!-- import ElementUI CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\"/\u003e\n\n\u003c!-- import Vue before Element --\u003e\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003c!-- import ElementUI --\u003e\n\u003cscript src=\"https://unpkg.com/element-ui/lib/index.js\"\u003e\u003c/script\u003e\n\u003c!-- import ElementProCrud --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/element-pro-crud/lib/pro-crud.js\"\u003e\u003c/script\u003e\n```\n\n### 按需引入\n\n例如单独引入表单设计器\n\n```html\n\u003c!-- import FormDesigner CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/form-designer.css\" /\u003e\n\u003c!-- import ElementUI CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\"/\u003e\n\n\u003c!-- import Vue before Element --\u003e\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003c!-- import ElementUI --\u003e\n\u003cscript src=\"https://unpkg.com/element-ui/lib/index.js\"\u003e\u003c/script\u003e\n\u003c!-- import FormDesigner --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/element-pro-crud/lib/form-designer.js\"\u003e\u003c/script\u003e\n```\n\n## 组件列表\n\n| 组件名          | 说明         |\n| :-------------- | :----------- |\n| `ProForm`       | 表单生成器   |\n| `ProTable`      | 表格生成器   |\n| `CrudTable`     | 增删改查表格 |\n| `FormDesigner`  | 表单设计器   |\n| `TableDesigner` | 表格设计器   |\n\n## 第三方库\n\n| 组件名         | 说明           | 版本号    | 说明                           | 引入方式(CDN 或者 NPM 引入均可)                                                           |\n| :------------- | :------------- | :-------- | :----------------------------- | :---------------------------------------------------------------------------------------- |\n| element-ui     | 饿了么 UI      | `^2.15.1` | 需在 element-pro-crud 之前引入 | https://unpkg.com/element-ui/lib/index.js                                                 |\n| ace            | 代码在线编辑器 | `^1.4.12` | 表单设计器/表格设计器使用      | https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js                                         |\n| tinymce        | 富文本编辑器   | `^4.7.5`  | 表单设计器/表格设计器使用      | https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js                            |\n| echarts        | echarts 图表   | `^5.0.1`  | 表单设计器/表格设计器使用      | https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js                            |\n| vue-treeselect | 树形下拉框     | `^0.4.0`  | 表单设计器/表格设计器使用      | https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.4.0/dist/vue-treeselect.umd.min.js |\n\n\n## 本地开发\n``` \nyarn\n\nyarn start\n```\n\n\n## License\n\n[LGPL](https://opensource.org/licenses/LGPL-3.0)\n\nCopyright (c) 2020-present, BoBoooooo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBoBoooooo%2FElement-Pro-Crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBoBoooooo%2FElement-Pro-Crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBoBoooooo%2FElement-Pro-Crud/lists"}