docs: update docs

BoBoooooo · Feb 3, 2021 · 0777361 · 0777361
1 parent 09c5fac
commit 0777361
Showing 1 changed file with 122 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,7 +1,128 @@
+<p align="center">
+  <img width="200" src="https://img.imgdb.cn/item/601a417c3ffa7d37b3d3b19a.png">
+</p>
+
 # 🎉 ElementProCrud 🎉
 
-详情见[文档](https://crud.boboooooo.top)
+ElementProCrud 快速搭建 CRUD 的利器
+
+[![NPM Version](http://img.shields.io/npm/v/element-pro-crud.svg?style=flat)](https://www.npmjs.org/package/element-pro-crud)
+[![NPM Downloads](https://img.shields.io/npm/dm/element-pro-crud.svg?style=flat)](https://www.npmjs.org/package/element-pro-crud)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+## Documentation
+[文档地址](https://crud.boboooooo.top)
+
+## Install
+
+### NPM
+
+```
+npm i element-pro-crud -s
+```
+
+完整引入
+
+```javascript
+import ElementProCrud from 'element-pro-crud'
+import ElementUI from 'element-ui'
+import 'element-pro-crud/lib/ProCrud.css'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI)
+Vue.use(ElementProCrud)
+```
+
+按需引入
+
+```javascript
+  import { GenerateForm } from 'element-pro-crud';
+  Vue.use(GenerateForm);
+
+  import Vue from 'vue';
+  import { GenerateForm, ProTable, CrudTable, FormDesigner, TableDesigner } from 'element-pro-crud';
+  import App from './App.vue';
+
+  Vue.use(GenerateForm);
+  Vue.use(ProTable);
+  Vue.use(FormDesigner);
+  Vue.use(TableDesigner);
+  Vue.use(CrudTable, {
+      getFormDetail: (tablename) => AxiosPromise(formJSON);// 获取某个表单设计json
+      getTableDetail: (tablename) => AxiosPromise(tableJSON);// 获取某个表格设计json
+      crud: (dml: DML, tableName: string, data?: object, params?: object)=> AxiosPromise; // 通用CRUD封装
+  })
+
+  new Vue({
+    el: '#app',
+    render: h => h(App)
+  });
+```
+
+### CDN
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- 引入ProCrud CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/ProCrud.css" />
+    <!-- 引入ElementUI CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
+    />
+  </head>
+  <body>
+    <div id="app">
+      <el-button @click="showDialog('form')" type="primary">打开表单设计器</el-button>
+      <el-button @click="showDialog('table')" type="danger">打开表格设计器</el-button>
+      <form-designer-dialog ref="form"></form-designer-dialog>
+      <table-designer-dialog ref="table"></table-designer-dialog>
+      <crud-table tableName="dept" tableTitle="表格示例"></crud-table>
+    </div>
+  </body>
+  <!-- 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@latest/lib/ProCrud.umd.js"></script>
+
+  <script>
+    new Vue({
+      el: "#app",
+      methods:{
+        showDialog(name){
+          this.$refs[name].showDialog();
+        }
+      }
+    });
+  </script>
+</html>
+```
+
+## 组件列表
+
+- `GenerateForm` 根据表单设计器 json 自动渲染表单
+
+- `ProTable` 二次封装 el-table
+
+- `CrudTable` 高级增删改查 CrudTable
+
+- `FormDesigner` 表单设计器
+
+- `TableDesigner` 表格设计器
+
+## Demo
 
 [在线 demo](http://server.boboooooo.top:9997)
 
+## Production
+
 [生产环境 demo](http://server.boboooooo.top:9998)
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2020-present, BoBoooooo