refactor: 调整目录结构,加入types声明文件

BoBoooooo · Nov 2, 2020 · ab896f3 · ab896f3
1 parent cbb3488
commit ab896f3
Show file tree

Hide file tree

Showing 30 changed files with 145 additions and 37 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -1,25 +1,35 @@
+<!--
+ * @file: 本地运行debug (umd打包后调试请允许demo.html)
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年10月30 15:58:48
+-->
 <template>
   <div id="app">
-    <el-button @click="showDialog" type="primary">打开表单设计器</el-button>
-    <FormDesignerDialog ref="dialog"></FormDesignerDialog>
+
+    <TableDesignerDialog ref="table"></TableDesignerDialog>
+    <FormDesignerDialog ref="form"></FormDesignerDialog>
     <CrudTable tableName='dept'
                :visibleList='{
            tableTitle:false,
          }'
                fullHeight>
     </CrudTable>
+    <el-button @click="showDialog('form')"
+               type="primary">打开表单设计器</el-button>
+    <el-button @click="showDialog('table')"
+               type="danger">打开表格设计器</el-button>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'app',
+  name: "app",
   methods: {
-    showDialog() {
-      this.$refs.dialog.showDialog();
+    showDialog(name) {
+      this.$refs[name].showDialog();
     },
   },
-
 };
 </script>
 

diff --git a/public/demo.html → examples/demo.html b/public/demo.html → examples/demo.html
@@ -1,3 +1,9 @@
+<!--
+ * @file: umd打包后本地调试
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年10月30 15:58:49
+-->
 <!DOCTYPE html>
 <html>
   <head>

diff --git a/packages/form-designer/src/element.ts → examples/element.ts b/packages/form-designer/src/element.ts → examples/element.ts
diff --git a/examples/main.ts b/examples/main.ts
@@ -1,10 +1,9 @@
-import Vue from 'vue';
+import Vue from 'vue'; 
 import App from './App.vue';
-// 直接引入lib进行npm install 模拟测试
-// import plugin from '../lib/plugin.umd.js';
-// import '../lib/plugin.css';
-import plugin from '../packages/index';
-
+// 导入ElementProCrud
+import plugin from '../src/index';
+// 引入ElementUI
+import './element';
 Vue.use(plugin);
 Vue.config.productionTip = false;
 

diff --git a/package.json b/package.json
@@ -1,25 +1,42 @@
 {
   "name": "element-pro-crud",
-  "version": "0.1.1",
-  "description": "二次封装Table,Form组件,配套表单,表格设计器,一键Crud",
+  "version": "0.1.2",
   "main": "lib/ProCrud.umd.min.js",
+  "files": [
+    "lib",
+    "src",
+    "packages",
+    "types"
+  ],
+  "typings": "types/index.d.ts",
+  "description": "二次封装Table,Form组件,配套表单,表格设计器,一键Crud",
   "private": false,
   "license": "MIT",
   "keyword": "ElementUI,CRUD,el-table,el-form,表单设计器",
-  "keywords": ["CRUD","ElementUI","el-table","el-form","表单设计器","表格设计器"],
+  "keywords": [
+    "CRUD",
+    "ElementUI",
+    "el-table",
+    "el-form",
+    "表单设计器",
+    "表格设计器"
+  ],
   "author": "BoBo<BoBoooooo159@gmail.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/BoBoooooo/Element-Pro-Crud"
   },
-  "homepage": "https://github.com/BoBoooooo/Element-Pro-Crud/blob/master/README.md",
+  "homepage": "https://github.com/BoBoooooo/Element-Pro-Crud#readme",
+  "bugs": {
+    "url": "https://github.com/BoBoooooo/Element-Pro-Crud/issues"
+  },
   "scripts": {
     "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "fix": "eslint --ext .ts,.vue packages --fix",
     "report": "cross-env IS_REPORT=true vue-cli-service build",
-    "lib": "vue-cli-service build --target lib --name ProCrud --dest lib packages/index.ts",
+    "lib": "vue-cli-service build --target lib --name ProCrud --dest lib src/index.ts",
     "deploy": "npm run lib && npm publish"
   },
   "dependencies": {

diff --git a/packages/crud-table/src/CrudTable.vue b/packages/crud-table/src/CrudTable.vue
@@ -239,7 +239,7 @@ import {
 import { DML, crud } from '@/api/public/crud';
 import { getTableDetail, getFormDetail } from '@/api/system/form';
 import { confirm } from '@/utils/confirm';
-import SvgIcon from '@/common/icons/SvgIcon.vue';
+import SvgIcon from '@/icons/SvgIcon.vue';
 import GenerateFormDialog from './GenerateFormDialog.vue';
 import SearchForm from './SearchForm.vue';
 

diff --git a/packages/crud-table/src/GenerateFormDialog.vue b/packages/crud-table/src/GenerateFormDialog.vue
@@ -45,7 +45,7 @@
 <script lang="ts">
 import { DML, crud } from '@/api/public/crud';
 import { getFormDetail } from '@/api/system/form';
-import GenerateForm from '@/form-designer/src/GenerateForm.vue';
+import GenerateForm from 'packages/form-designer/src/GenerateForm.vue';
 import guid from '@/utils/generator';
 import {
   Component, Vue, Emit, Watch, Prop,

diff --git a/packages/crud-table/src/SeniorSearchForm.vue b/packages/crud-table/src/SeniorSearchForm.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import GenerateForm from '@/form-designer/src/GenerateForm.vue';
+import GenerateForm from 'packages/form-designer/src/GenerateForm.vue';
 import { DML, crud } from '@/api/public/crud';
 import { getFormDetail } from '@/api/system/form';
 

diff --git a/packages/form-designer/src/FormDesignerDialog.vue b/packages/form-designer/src/FormDesignerDialog.vue
@@ -210,9 +210,7 @@
 </template>
 
 <script>
-
-// import './element';
-import SvgIcon from '@/common/icons/SvgIcon.vue';
+import SvgIcon from '@/icons/SvgIcon.vue';
 import Draggable from 'vuedraggable';
 import Icon from 'vue-awesome/components/Icon.vue';
 import { DML, crud } from '@/api/public/crud';

diff --git a/packages/api/axios.ts → src/api/axios.ts b/packages/api/axios.ts → src/api/axios.ts
diff --git a/packages/api/public/crud.ts → src/api/public/crud.ts b/packages/api/public/crud.ts → src/api/public/crud.ts
diff --git a/packages/api/system/form.ts → src/api/system/form.ts b/packages/api/system/form.ts → src/api/system/form.ts
diff --git a/packages/element-variables.scss → src/element-variables.scss b/packages/element-variables.scss → src/element-variables.scss
diff --git a/packages/common/icons/SvgIcon.vue → src/icons/SvgIcon.vue b/packages/common/icons/SvgIcon.vue → src/icons/SvgIcon.vue
diff --git a/packages/common/icons/autoImportSvg.ts → src/icons/autoImportSvg.ts b/packages/common/icons/autoImportSvg.ts → src/icons/autoImportSvg.ts
diff --git a/packages/common/icons/svg/logo.svg → src/icons/svg/logo.svg b/packages/common/icons/svg/logo.svg → src/icons/svg/logo.svg
diff --git a/packages/common/icons/svg/table_empty.svg → src/icons/svg/table_empty.svg b/packages/common/icons/svg/table_empty.svg → src/icons/svg/table_empty.svg
diff --git a/packages/index.ts → src/index.ts b/packages/index.ts → src/index.ts
@@ -7,12 +7,12 @@
 
 // packages / index.js
 import './element-variables.scss';// 按需导入element-ui css
-import '@/common/icons/autoImportSvg'; // 自动导入src/icon目录下的svg图标
+import '@/icons/autoImportSvg'; // 自动导入src/icon目录下的svg图标
 // 导入单个组件
-import FormDesignerDialog from './form-designer';
-import CrudTable from './crud-table';
-import GenerateForm from './form-designer/src/GenerateForm.vue';
-import TableDesignerDialog from './table-designer';
+import FormDesignerDialog from 'packages/form-designer';
+import CrudTable from 'packages/crud-table';
+import GenerateForm from 'packages/form-designer/src/GenerateForm.vue';
+import TableDesignerDialog from 'packages/table-designer';
 
 // 以数组的结构保存组件，便于遍历
 const components = [
@@ -26,6 +26,7 @@ const components = [
     component: CrudTable,
   },
   {
+    // 此处深坑,vue-class-component export的组件没有name属性！！!
     name: 'GenerateForm',
     component: GenerateForm,
   },
@@ -51,6 +52,9 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  // 导出的对象必须具备一个 install 方法
   install,
+  FormDesignerDialog,
+  CrudTable,
+  GenerateForm,
+  TableDesignerDialog,
 };
diff --git a/packages/utils/confirm.ts → src/utils/confirm.ts b/packages/utils/confirm.ts → src/utils/confirm.ts
diff --git a/packages/utils/download.ts → src/utils/download.ts b/packages/utils/download.ts → src/utils/download.ts
diff --git a/packages/utils/generator.ts → src/utils/generator.ts b/packages/utils/generator.ts → src/utils/generator.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,12 +14,13 @@
     "baseUrl": ".",
     "types": [
       "webpack-env",
-      "./../element-ui/types",
+      "./../element-ui/types"
     ],
     "paths": {
       "@/*": [
         "examples/*",
-        "packages/*"
+        "packages/*",
+        "src/*"
       ]
     },
     "lib": [
@@ -33,7 +34,11 @@
     "examples/**/*.ts",
     "examples/**/*.vue",
     "packages/**/*.ts",
-    "packages/**/*.tsx"
+    "packages/**/*.vue",
+    "packages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
   ],
   "exclude": [
     "node_modules"

diff --git a/types/crud-table.d.ts b/types/crud-table.d.ts
@@ -0,0 +1,7 @@
+import { BaseComponent } from './main'
+
+
+/** CrudTable Component */
+export declare class ElCrudTable extends BaseComponent {
+
+}
diff --git a/types/element-pro-crud.d.ts b/types/element-pro-crud.d.ts
@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import { BaseComponent } from './main'
+import { ElCrudTable } from './crud-table'
+import { ElFormDesignerDialog } from './form-designer-dialog'
+import { ElTableDesignerDialog } from './table-designer-dialog'
+import { ElGenerateForm } from './generate-form'
+
+export interface InstallationOptions {}
+
+/**
+ * Install all ElementProCrud components into Vue.
+ * Please do not invoke this method directly.
+ * Call `Vue.use(ElementProCrud)` to install.
+ */
+export function install (vue: typeof Vue, options: InstallationOptions): void
+
+/** ElementUI component common definition */
+export type Component = BaseComponent
+
+/** FormDesignerDialog Component */
+export class FormDesignerDialog extends ElFormDesignerDialog {}
+
+/** TableDesignerDialog Component */
+export class TableDesignerDialog extends ElTableDesignerDialog {}
+
+/** GenerateForm Component */
+export class GenerateForm extends ElGenerateForm {}
+
+/** CrudTable Component */
+export class CrudTable extends ElCrudTable {}
diff --git a/types/form-designer-dialog.d.ts b/types/form-designer-dialog.d.ts
@@ -0,0 +1,7 @@
+import { BaseComponent } from './main'
+
+
+/** FormDesignerDialog Component */
+export declare class ElFormDesignerDialog extends BaseComponent {
+
+}
diff --git a/types/generate-form.d.ts b/types/generate-form.d.ts
@@ -0,0 +1,7 @@
+import { BaseComponent } from './main'
+
+
+/** GenerateForm Component */
+export declare class ElGenerateForm extends BaseComponent {
+
+}
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -0,0 +1,4 @@
+export * from './element-pro-crud'
+
+import * as ElementProCrud from './element-pro-crud'
+export default ElementProCrud
diff --git a/types/main.d.ts b/types/main.d.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+/** ElementProCrud component common definition */
+export declare class BaseComponent extends Vue {
+  /** Install component into Vue */
+  static install (vue: typeof Vue): void
+}
diff --git a/types/table-designer-dialog.d.ts b/types/table-designer-dialog.d.ts
@@ -0,0 +1,7 @@
+import { BaseComponent } from './main'
+
+
+/** TableDesignerDialog Component */
+export declare class ElTableDesignerDialog extends BaseComponent {
+
+}
diff --git a/vue.config.js b/vue.config.js
@@ -30,10 +30,9 @@ module.exports = {
         },
       ]);
     }
-    // vue inspect --rules 列出所有规则，可以看到svg是第三个
-    // vue inspect module.rules.2 可以列出默认svg规则配置
-    // 从默认svg规则中排除src/icons路径，因为会当做图标自动加载
-    config.module.rule('svg').exclude.add(resolve('packages/common/icons'));
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('packages/common/icons'));
     // 添加svg-sprite-loader加载器
     config.module
       .rule('svg-sprite-loader')
@@ -53,7 +52,8 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        '@': resolve('packages'),
+        '@': resolve('src'),
+        packages: resolve('packages'),
       },
     },
   },