第一次

.gitignore

@@ -1,7 +1,8 @@
 .DS_Store
 node_modules
+node_modules/*
 /dist
-
+/lib
 
 # local env files
 .env.local
@@ -21,3 +22,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json

babel.config.js

@@ -1,5 +1,16 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset',
+	["@babel/preset-env", { "modules": false }]
+  ],
+  plugins: [
+      [
+        "component",
+        {
+          "libraryName": "element-ui",
+          "styleLibraryName": "theme-chalk"
+        }
+      ]
     ]
 }
+

examples/index.js

@@ -0,0 +1,27 @@
+// 导入button组件
+import Button from './Button'
+
+// 组件列表
+const components = [
+  Button
+]
+
+// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
+const install = function (Vue) {
+  // 判断是否安装
+  if (install.installed) return
+  // 遍历注册全局组件
+  components.map(component => Vue.component(component.name, component))
+}
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下是具体的组件列表
+  Button
+}

examples/main.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import App from '../src/App.vue'
+
+
+//基于element组件封装，引入element组件库
+import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(Input);
+Vue.use(Select);
+Vue.use(OptionGroup);
+Vue.use(Option);
+Vue.use(DatePicker);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Pagination)
+Vue.use(Dialog)
+Vue.use(Button)
+
+// 导入组件库
+import erp_element_ui from '../packages'
+Vue.config.productionTip = false
+Vue.use(erp_element_ui)
+
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

package-lock.json

@@ -331,7 +331,8 @@
     "@babel/parser": {
       "version": "7.24.7",
       "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.7.tgz",
-      "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw=="
+      "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
+      "dev": true
     },
     "@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
       "version": "7.24.7",
@@ -2550,6 +2551,15 @@
         "lodash": "^4.17.14"
       }
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -2570,6 +2580,12 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
+      "dev": true
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -2582,6 +2598,38 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -2621,6 +2669,30 @@
         "@babel/helper-define-polyfill-provider": "^0.6.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "dev": true
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3418,7 +3490,8 @@
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
     },
     "de-indent": {
       "version": "1.0.2",
@@ -3710,6 +3783,20 @@
       "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "dev": true,
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5305,7 +5392,8 @@
     "nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true
     },
     "negotiator": {
       "version": "0.6.3",
@@ -5394,6 +5482,12 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -5715,7 +5809,8 @@
     "picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true
     },
     "picomatch": {
       "version": "2.3.1",
@@ -5758,6 +5853,7 @@
       "version": "8.4.39",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.39.tgz",
       "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "dev": true,
       "requires": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.1",
@@ -6084,6 +6180,7 @@
       "version": "2.8.8",
       "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
       "optional": true
     },
     "pretty-error": {
@@ -6352,6 +6449,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
@@ -6709,12 +6812,14 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
     },
     "source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -6995,6 +7100,12 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "dev": true
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -7165,6 +7276,7 @@
       "version": "2.7.16",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
       "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "dev": true,
       "requires": {
         "@vue/compiler-sfc": "2.7.16",
         "csstype": "^3.1.0"
@@ -7174,6 +7286,7 @@
           "version": "2.7.16",
           "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
           "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+          "dev": true,
           "requires": {
             "@babel/parser": "^7.23.5",
             "postcss": "^8.4.14",
@@ -7254,7 +7367,8 @@
     "vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
-      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
+      "dev": true
     },
     "vue-style-loader": {
       "version": "4.1.3",
@@ -7313,7 +7427,8 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "dev": true
     },
     "watchpack": {
       "version": "2.4.1",

package.json

@@ -3,23 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "lib": "vue-cli-service build --target lib --dest lib packages/index.js"
   },
   "dependencies": {
-    "core-js": "^3.8.3",
+    "core-js": "^3.8.3"
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-plugin-component": "^1.1.1",
+    "element-ui": "^2.15.14",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "browserslist": [
     "> 1%",

packages/MultifunctionSearch/index.js

@@ -0,0 +1,9 @@
+// import pedestal from './src'
+
+// // 为组件提供 install 安装方法，供按需引入
+// pedestal.install = function (Vue) {
+//     Vue.component(pedestal.name, pedestal)
+// }
+
+// // 导出组件
+// export default pedestal

packages/MultifunctionSearch/src/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>主组件</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang='scss'>
+</style>

packages/agDatePicker/index.js

@@ -0,0 +1,9 @@
+import agDatePicker from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agDatePicker.install = function (Vue) {
+    Vue.component(agDatePicker.name, agDatePicker)
+}
+
+// 导出组件
+export default agDatePicker

packages/agDatePicker/src/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-date-picker
+    class="ag-date-picker"
+    v-model="dateArr"
+    v-bind="attrs"
+    v-on="inputListeners"
+  />
+</template>
+
+<script>
+/**
+ * agDatePicker 时间选择器
+ */
+import isEmpty from "../../../src/utils/isEmpty";
+
+export default {
+  name: "agDatePicker",
+  props: {
+    value: {
+      type: Array,
+      default: () => [null, null],
+    },
+  },
+  data() {
+    return {
+      dateArr: [null, null],
+    };
+  },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        type: "daterange",
+        format: "yyyy/MM/dd",
+        "value-format": "yyyy-MM-dd",
+        "start-placeholder": "开始日期",
+        "end-placeholder": "结束日期",
+        "range-separator": "-",
+        "picker-options": {
+          disabledDate(time) {
+            return (
+              time.getTime() >
+              new Date(new Date().toLocaleDateString()).getTime() +
+                24 * 60 * 60 * 1000 -
+                1
+            );
+          },
+          shortcuts: [
+            {
+              text: "本月",
+              onClick(picker) {
+                const end =
+                  new Date(new Date().toLocaleDateString()).getTime() +
+                  24 * 60 * 60 * 1000 -
+                  1;
+                const time = new Date();
+                time.setDate(1);
+                time.setHours(0);
+                time.setSeconds(0);
+                time.setMinutes(0);
+                var start = time.getTime();
+                picker.$emit("pick", [start, end]);
+              },
+            },
+            {
+              text: "近一个月",
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                picker.$emit("pick", [start, end]);
+              },
+            },
+            {
+              text: "近三个月",
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                picker.$emit("pick", [start, end]);
+              },
+            },
+            {
+              text: "近六个月",
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
+                picker.$emit("pick", [start, end]);
+              },
+            },
+            {
+              text: "最近一年",
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
+                picker.$emit("pick", [start, end]);
+              },
+            },
+          ],
+        }, //多选日期
+        ...this.$attrs,
+      };
+    },
+    // 所有父级事件
+    inputListeners() {
+      return Object.assign({}, this.$listeners, {
+        input: (value) => {
+          let date1 = "";
+          let date2 = "";
+
+          if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
+            date1 = `${value[0]} 00:00:00`;
+            date2 = `${value[1]} 23:59:59`;
+          }
+          this.$emit("input", [date1, date2]);
+        },
+      });
+    },
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        if (!Array.isArray(newVal)) {
+          throw new Error("agDatePicker date请传入数组");
+        }
+
+        let [date1, date2] = newVal;
+        if (!this.dateArr) {
+          this.dateArr = [date1 || "", date2 || ""];
+          return;
+        }
+        this.$set(this.dateArr, 0, date1 || "");
+        this.$set(this.dateArr, 1, date2 || "");
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/agDialog/index.js

@@ -0,0 +1,9 @@
+import agDialog from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agDialog.install = function (Vue) {
+    Vue.component(agDialog.name, agDialog)
+}
+
+// 导出组件
+export default agDialog

packages/agDialog/src/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    class="ag-dialog"
+    :title="$slots.title ? '' : title"
+    :visible.sync="show"
+    :custom="custom"
+    v-bind="attrs"
+    v-on="$listeners"
+  >
+    <!-- 有写弹窗头部则采用输入的 -->
+    <template v-if="$slots.title">
+      <span slot="title">
+        <slot name="title" />
+      </span>
+    </template>
+    <!-- 弹窗内容区域 -->
+    <slot />
+    <!-- 默认底部 -->
+    <template v-if="!$slots.footer && custom">
+      <div slot="footer" class="dialog-footer">
+        <el-button class="btn" size="small" @click="cancel">取消</el-button>
+        <el-button class="btn sure" size="small" type="primary" @click="submit"
+          >确定</el-button
+        >
+      </div>
+    </template>
+    <!-- 弹窗底部区域,可自定义 -->
+    <template v-if="$slots.footer">
+      <span slot="footer">
+        <slot name="footer" />
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+//没有输入slot=title的时候，就使用自定义的shot=title
+export default {
+  name: "agDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    custom: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    attrs() {
+      return {
+        width: "30%",
+        top: "15vh",
+        boolean: "dialog",
+        "show-close": false,
+        "append-to-body": true,
+        "modal-append-to-body": true,
+        "destroy-on-close": true,
+        ...this.$attrs,
+      };
+    },
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val); // visible 改变的时候通知父组件
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancel");
+    },
+    submit() {
+      this.$emit("submit");
+    },
+  },
+};
+</script>
+
+<style scoped >
+</style>

packages/agInput/index.js

@@ -0,0 +1,9 @@
+import agInput from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agInput.install = function (Vue) {
+    Vue.component(agInput.name, agInput)
+}
+
+// 导出组件
+export default agInput

packages/agInput/src/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-input
+    class="ag_input"
+    :style="{ width }"
+    v-on="inputListeners"
+    v-bind="attrs"
+  >
+    <slot name="append" slot="append" />
+    <slot name="prefix" slot="prefix" />
+    <slot name="suffix" slot="suffix" />
+    <slot name="prepend" slot="prepend" />
+  </el-input>
+</template>
+  
+  <script>
+/**
+ * WInput
+ * @desc    处理输入的输入框(转大写，不能有中文空格等)
+ */
+export default {
+  name: "agInput",
+  props: {
+    width: {
+      type: String,
+      default: "",
+    },
+    toUpperCase: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        clearable: true, // 默认清空
+        ...this.$attrs,
+      };
+    },
+    // 所有父级事件
+    inputListeners() {
+      return Object.assign(
+        {},
+        // 我们从父级添加所有的监听器
+        this.$listeners,
+        // 然后我们添加自定义监听器，
+        // 或覆写一些监听器的行为
+        {
+          // 这里确保组件配合 `v-model` 的工作
+          input: (value) => {
+            this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
+          },
+          blur: (e) => {
+            let value = e.target.value
+              .trim()
+              .replace(/\s/g, (match) =>
+                match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
+              );
+
+            // 失去焦点自动首位去空格
+            this.$emit("input", value);
+          },
+        }
+      );
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+@import url("~@/static/index.scss");
+</style>
+  

packages/agNumberRange/index.js

@@ -0,0 +1,9 @@
+import agNumberRange from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agNumberRange.install = function (Vue) {
+    Vue.component(agNumberRange.name, agNumberRange)
+}
+
+// 导出组件
+export default agNumberRange

packages/agNumberRange/src/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="ag-number-range">
+    <el-input
+      :style="{ width: width + 'px' }"
+      :size="size"
+      v-model="startValue"
+      @input="handleStartInput"
+      @blur="handleInputBlur"
+    ></el-input>
+    <span class="separator">{{ rangeSeparator }}</span>
+    <el-input
+      :style="{ width: width + 'px' }"
+      :size="size"
+      v-model="endValue"
+      @input="handleEndInput"
+      @blur="handleInputBlur"
+    ></el-input>
+  </div>
+</template>
+
+<script>
+/**
+ * NumberRange
+ * 数值范围
+ */
+export default {
+  name: "agNumberRange",
+
+  model: {
+    prop: "value",
+    event: "change",
+  },
+
+  props: {
+    // 绑定的value
+    value: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+
+    // 分隔符
+    rangeSeparator: {
+      type: String,
+      default: "-",
+    },
+
+    // 输入框宽度
+    width: {
+      type: [Number, String],
+      default: "50",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+  },
+  data() {
+    return {
+      // 开始数值
+      startValue: "",
+      // 结束数值
+      endValue: "",
+    };
+  },
+  comments: {
+
+  },
+  watch: {
+    value(newValue) {
+      if (Array.isArray(newValue)) {
+        this.startValue = newValue[0];
+        this.endValue = newValue[1];
+      }
+    },
+  },
+
+  methods: {
+    /**
+     * 输入框失去焦点
+     * @emit change
+     */
+    handleInputBlur() {
+      this.$emit("change", [this.startValue, this.endValue]);
+    },
+
+    /**
+     * 监听start值
+     * @param e 当前值
+     */
+    handleStartInput(e) {
+      this.startValue = this.formatValue(e);
+    },
+
+    /**
+     * 监听end值
+     * @param e 当前值
+     */
+    handleEndInput(e) {
+      this.endValue = this.formatValue(e);
+    },
+
+    /**
+     * 格式化输入, 只能输入数字 和 .
+     * @param v
+     * @return {*}
+     */
+    formatValue(v) {
+      const reg = /[^\d|.]/g;
+      return v.replace(reg, "");
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

packages/agPagination/index.js

@@ -0,0 +1,9 @@
+import agPagination from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agPagination.install = function (Vue) {
+    Vue.component(agPagination.name, agPagination)
+}
+
+// 导出组件
+export default agPagination

packages/agPagination/src/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-pagination class="ag-pagination" v-bind="attrs" v-on="$listeners">
+  </el-pagination>
+</template>  
+<script>
+export default {
+  name: "agPagination",
+  props: {
+    tabsData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    attrs() {
+      return {
+        total: 0,
+        "page-size": 20,
+        "current-page": 1,
+        "page-sizes": [20, 50, 100, 200],
+        layout: "total, sizes, prev, pager, next, jumper",
+        ...this.$attrs,
+      };
+    },
+  },
+  methods: {},
+};
+</script>  
+  
+<style scoped lang="scss">
+</style>

packages/agSelect/index.js

@@ -0,0 +1,9 @@
+import agSelect from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agSelect.install = function (Vue) {
+    Vue.component(agSelect.name, agSelect)
+}
+
+// 导出组件
+export default agSelect

packages/agSelect/src/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-select
+    class="ag_select"
+    :style="{ width }"
+    v-bind="attrs"
+    v-on="inputListeners"
+  >
+    <slot />
+    <slot name="prefix" slot="prefix" />
+    <slot name="empty" slot="empty" />
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "agSelect",
+  props: {
+    width: {
+      type: String,
+      default: "",
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        remote: true,
+        clearable: true,
+        filterable: true,
+        ...this.$attrs,
+      };
+    },
+    // 所有父级事件
+    inputListeners() {
+      return Object.assign(
+        {},
+        // 我们从父级添加所有的监听器
+        this.$listeners,
+        // 然后我们添加自定义监听器，
+        // 或覆写一些监听器的行为
+        {
+          // 这里确保组件配合 `v-model` 的工作
+          input: (value) => {
+            this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
+          },
+          blur: (e) => {
+            let value = e.target.value
+              .trim()
+              .replace(/\s/g, (match) =>
+                match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
+              );
+            // 失去焦点自动首位去空格
+            this.$emit("input", value);
+          },
+        }
+      );
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/agTabs/index.js

@@ -0,0 +1,9 @@
+import agTabs from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agTabs.install = function (Vue) {
+    Vue.component(agTabs.name, agTabs)
+}
+
+// 导出组件
+export default agTabs

packages/agTabs/src/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-tabs class="ag-tabs" v-bind="$attrs" v-on="$listeners">
+    <slot v-if="!tabsData.length" name="default" />
+    <el-tab-pane
+      v-else
+      v-for="(item, index) in tabsData"
+      :key="index"
+      :name="item.name"
+      :lazy="item.lazy || false"
+      :disabled="item.disabled || false"
+      :closable="item.closable || false"
+    >
+      <template #label>
+        <span>
+          {{ item.label }}
+          <i :class="item.icon"></i>
+          <span v-if="item.remark" class="remark">{{ item.remark }}</span>
+        </span>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>  
+<script>
+export default {
+  name: "agTabs",
+  props: {
+    tabsData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>  
+  
+<style scoped lang="scss">
+</style>

packages/index.js

@@ -0,0 +1,32 @@
+	// 导入组件
+  import agInput from './agInput/index'
+  import agSelect from './agSelect/index'
+  
+  // 组件列表
+  const components = [
+    agInput,
+    agSelect
+  ]
+  
+  // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
+  const install = function (Vue) {
+    // 判断是否安装
+    if (install.installed) return
+    // 遍历注册全局组件
+    components.map(component => Vue.component(component.name, component))
+  }
+  
+  // 判断是否是直接引入文件
+  if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue)
+  }
+  
+  export default {
+    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+    install,
+  }
+  export {
+    // 以下是具体的组件列表
+    agInput,
+    agSelect
+  }

src/App.vue

@@ -1,32 +1,171 @@
 <template>
-  <div id="app">
+  <div>
-    <nav>
+    <el-button type="text" @click="abb = true">点击打开 Dialog</el-button>
-      <router-link to="/">Home</router-link> |
+    <agTabs ref="ref_Pedestal" :visible.sync="abb">
-      <router-link to="/about">About</router-link>
+      <!-- <span slot="footer">房价大降分类数据</span> -->
-    </nav>
+    </agTabs>
-    <router-view/>
+    <div class="div"><span>888</span></div>
   </div>
 </template>
 
+<script>
+import agTabs from "../packages/agDialog/src/index.vue";
+export default {
+  components: { agTabs },
+  data() {
+    return {
+      value: "",
+      options: [
+        {
+          label: "热门城市",
+          options: [
+            {
+              value: "Shanghai",
+              label: "上海",
+            },
+            {
+              value: "Beijing",
+              label: "北京",
+            },
+          ],
+        },
+        {
+          label: "城市名",
+          options: [
+            {
+              value: "Chengdu",
+              label: "成都",
+            },
+            {
+              value: "Shenzhen",
+              label: "深圳",
+            },
+            {
+              value: "Guangzhou",
+              label: "广州",
+            },
+            {
+              value: "Dalian",
+              label: "大连",
+            },
+          ],
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      tabsData: [
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          disabled: true,
+          remark: "99",
+          name: "0",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "100",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "2",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "3",
+          total: 0,
+        },
+        {
+          label: "全部",
+          icon: "el-icon-phone",
+          remark: "99",
+          name: "4",
+          total: 0,
+        },
+      ],
+      abb: false,
+      innerVisible: false,
+      // options: [
+      //   {
+      //     value: "选项1",
+      //     label: "黄金糕",
+      //   },
+      //   {
+      //     value: "选项2",
+      //     label: "双皮奶",
+      //   },
+      //   {
+      //     value: "选项3",
+      //     label: "蚵仔煎",
+      //   },
+      //   {
+      //     value: "选项4",
+      //     label: "龙须面",
+      //   },
+      //   {
+      //     value: "选项5",
+      //     label: "北京烤鸭",
+      //   },
+      // ],
+    };
+  },
+  methods: {
+    handleClick() {
+      console.log(1111);
+    },
+    handleSizeChange() {},
+    handleCurrentChange() {},
+    handleClose() {},
+  },
+};
+</script>
+
 <style lang="scss">
-#app {
+@import '../src/static/index.scss';
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+body {
-  -webkit-font-smoothing: antialiased;
+  background: #918d8d;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
 }
+.div {
+  span {
+    display: block;
+    width: 50px;
   }
 }
 </style>

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -1,12 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')

src/static/index.scss

@@ -0,0 +1,320 @@
+// 当超过宽度时，显示省略号
+@mixin ell() {
+    overflow: hidden;
+    -ms-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+// 当超过n行时，显示省略号
+@mixin elln($n) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $n;
+}
+
+// 清除浮动
+.clearfix {
+    & after {
+        display: table;
+        clear: both;
+        content: "";
+    }
+}
+
+@mixin cj1 {
+    position: absolute;
+    /*  垂直居中 未知父元素高度 父元素需position: relative; */
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+@mixin cj2 {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    /* IE 9 */
+    -moz-transform: translateY(-50%);
+    /* Firefox */
+    -webkit-transform: translateY(-50%);
+    /* Safari 和 Chrome */
+    -o-transform: translateY(-50%);
+    /* Opera */
+}
+
+@mixin cjf {
+    display: flex;
+    /*谷歌，火狐等新版本*/
+    display: -webkit-box;
+    /*安卓低版本*/
+    display: -moz-box;
+    /*火狐低版本*/
+    display: -ms-flexbox;
+    /*IE版本*/
+    display: -webkit-flex;
+    /*谷歌*/
+    align-items: center;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+}
+
+@mixin sj1 {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+@mixin sj2 {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    /* IE 9 */
+    -moz-transform: translateX(-50%);
+    /* Firefox */
+    -webkit-transform: translateX(-50%);
+    /* Safari 和 Chrome */
+    -o-transform: translateX(-50%);
+    /* Opera */
+}
+
+@mixin sjf {
+    display: flex;
+    /*谷歌，火狐等新版本*/
+    display: -webkit-box;
+    /*安卓低版本*/
+    display: -moz-box;
+    /*火狐低版本*/
+    display: -ms-flexbox;
+    /*IE版本*/
+    display: -webkit-flex;
+    /*谷歌*/
+    justify-content: center;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+}
+
+// 清除默认样式开始
+html,
+body {
+    height: 100%;
+}
+
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+    margin: 0;
+    padding: 0;
+}
+
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+    display: block;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+caption,
+th {
+    text-align: left;
+    font-weight: normal;
+}
+
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+    border: 0;
+}
+
+i,
+cite,
+em,
+var,
+address,
+dfn {
+    font-style: normal;
+}
+
+[hidefocus],
+summary {
+    outline: 0;
+}
+
+li {
+    list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+    font-size: 100%;
+}
+
+sup,
+sub {
+    font-size: 83%;
+}
+
+pre,
+code,
+kbd,
+samp {
+    font-family: inherit;
+}
+
+q:before,
+q:after {
+    content: none;
+}
+
+textarea {
+    overflow: auto;
+    resize: none;
+}
+
+label,
+summary {
+    cursor: default;
+}
+
+a,
+button {
+    cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+    font-weight: bold;
+}
+
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+    text-decoration: none;
+}
+
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+    font: 12px/1.14 Microsoft YaHei, arial, \5b8b\4f53;
+    color: #333;
+    outline: 0;
+}
+
+body {
+    background: #fff;
+}
+
+a,
+a:hover {
+    color: #333;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+// 清除默认样式结束
+// 滚动条美化
+@media screen and (min-width: 768px) {
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 9px;
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: #C1C1C1;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: #A8A8A8;
+    }
+
+    /* 小型尺寸 */
+    .mini-bar::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    .mini-bar::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+    }
+}

src/utils/cloneDeep.js

@@ -0,0 +1,12 @@
+export default function cloneDeep(obj, hash = new WeakMap()) {
+    if (obj == null || typeof obj !== "object") return obj
+    if (obj instanceof Date) return new Date(obj)
+    if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
+    if (hash.has(obj)) return hash.get(obj)
+    let deepobj = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj))
+    hash.set(obj, deepobj)
+    for (const key in obj) {
+        deepobj[key] = cloneDeep(obj[key], hash);
+    }
+    return deepobj
+}

src/utils/isEmpty.js

@@ -0,0 +1,24 @@
+export default function isEmpty(value) {
+    // 首先，检查null和undefined  
+    if (value == null) {
+        return true;
+    }
+
+    // 检查数字、字符串和布尔值（非空字符串、非零数字和非false值被视为非空）  
+    if (typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean') {
+        return !value;
+    }
+
+    // 检查对象、数组和函数  
+    if (typeof value === 'object' || typeof value === 'function') {
+        // 使用Object.keys()来获取对象自身的所有属性键组成的数组  
+        // 然后检查这个数组的长度是否为0  
+        // 注意：对于数组和函数，这同样适用，因为它们在JavaScript中也是对象  
+        return Object.keys(value).length === 0;
+    }
+
+    // 如果以上条件都不满足，那么可能是一个特殊的对象（如RegExp, Date等）  
+    // 在这里，我们假设这些都不是“空”的，除非你有特定的需求来处理它们  
+    // 但按照lodash的`_.isEmpty`的逻辑，这些通常被视为非空  
+    return false;
+} 

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

vue.config.js

@@ -1,4 +1,19 @@
-const { defineConfig } = require('@vue/cli-service')
+module.exports = {
-module.exports = defineConfig({
+  pages: {
-  transpileDependencies: true
+    index: {
-})
+      entry: 'examples/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
+  },
+  // 扩展 webpack 配置，使 packages 加入编译
+  chainWebpack: config => {
+    config.module
+      .rule('js')
+      .include
+        .add('/packages')
+        .end()
+      .use('babel')
+        .loader('babel-loader')
+  }
+}