babel.config.js

@@ -1,16 +1,5 @@
 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/main.js

@@ -1,17 +1,12 @@
 import Vue from 'vue'
 import App from '../src/App.vue'
 
-//基于element组件封装，引入element组件库
-import { Input, Select } from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-Vue.use(Input);
-Vue.use(Select);
-
 // 导入组件库
-import erp_element_ui from '../packages'
+import myui from '../packages'
-Vue.config.productionTip = false
-Vue.use(erp_element_ui)
 
+Vue.config.productionTip = false
+
+Vue.use(myui)
 
 new Vue({
   render: h => h(App),

package.json

@@ -10,18 +10,16 @@
   },
   "main": "./lib/myErpElement.umd.min.js",
   "dependencies": {
-    "core-js": "^3.6.5"
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.19",
     "@vue/cli-plugin-eslint": "~4.5.19",
     "@vue/cli-service": "~4.5.19",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "element-ui": "^2.15.14",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

packages/Button/index.js

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

packages/Button/src/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="button">
+      <slot name="default" :datas="datas">{{ datas.a }}</slot>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: 'mButton',
+    props: {
+      type: String
+    },
+    data() {
+      return {
+        datas:{
+          a:'666',
+          b:'successs'
+        }
+      }
+    },
+  }
+  </script>
+  
+  <style scoped>
+  .button {
+    width: 100px;
+    border: 1px solid #000;
+    padding: .5rem;
+    margin: 0 auto;
+  }
+  
+  .button:hover {
+    color: aliceblue;
+    background-color: orange;
+  }
+  </style>
+  
+  

packages/Button1/index.js

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

packages/Button1/src/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="button">
+    <slot v-bind:data="name">{{ name.a }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mButton1',
+  props: {
+    type: String
+  },
+  data() {
+    return {
+      name: { a: '777', b: '888' }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.button {
+  width: 100px;
+  border: 1px solid #000;
+  padding: .5rem;
+  margin: 0 auto;
+}
+
+.button:hover {
+  color: aliceblue;
+  background-color: #000000;
+}
+</style>

packages/MultifunctionSearch/index.js

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

packages/MultifunctionSearch/src/index.vue

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

packages/agInput/index.js

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

packages/agInput/src/index.vue

@@ -1,72 +0,0 @@
-<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></style>
-  

packages/agSelect/index.js

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

packages/agSelect/src/index.vue

@@ -1,102 +0,0 @@
-<template>
-  <el-select
-    class="ag_select"
-    :style="{ width }"
-    :value="value"
-    :size="size"
-    v-on="inputListeners"
-    v-bind="attrs"
-  >
-    <el-option
-      v-for="(item, index) in options"
-      :key="index"
-      :label="item.label"
-      :value="item.value"
-    ></el-option>
-    <!-- <slot name="options" slot="options" /> -->
-  </el-select>
-</template>
-
-<script>
-import cloneDeep from "../../../src/utils/cloneDeep";
-export default {
-  name: "agSelect",
-  props: {
-    width: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    size: {
-      type: String,
-      default: "small",
-    },
-  },
-  data() {
-    return {
-      model: "",
-      options: [],
-    };
-  },
-  computed: {
-    attrs() {
-      if (this.$attrs["remote-method"]) {
-        let obj = cloneDeep(this.$attrs);
-        Reflect.deleteProperty(obj, "remote-method");
-        return { ...obj, clearable: true, filterable: true, remote: true };
-      }
-      return false;
-    },
-    // 所有父级事件
-    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);
-          },
-        }
-      );
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(newVal) {
-        this.removeMethod(newVal);
-        this.model = newVal;
-      },
-    },
-  },
-  methods: {
-    async removeMethod(keywords) {
-      if (this.$attrs["remote-method"]) {
-        let opts = await this.$attrs["remote-method"](keywords);
-        this.options = opts;
-      }
-    },
-    handleChange(value) {
-      this.$emit("input", value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

packages/index.js

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

src/App.vue

@@ -1,45 +1,19 @@
 <template>
   <div>
-    <agSelect ref="ref_Pedestal" :value="value" @input="changeInput">
+    <moduleName></moduleName>
-    </agSelect>
   </div>
 </template>
 
 <script>
-import agSelect from "../packages/agSelect/src/index";
+import moduleName from "../packages/Button/src/index.vue";
 export default {
-  components: { agSelect },
+  components: { moduleName },
   data() {
-    return {
+    return {};
-      value: "",
-      options: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-    };
-  },
-  methods: {
-    changeInput() {
-      // console.log(this.value);
-    },
   },
+  methods: {},
 };
 </script>
 
-<style>
+<style scoped lang='scss'>
-body {
-  background: #81aa6e;
-}
 </style>

src/utils/cloneDeep.js

@@ -1,12 +0,0 @@
-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
-}