vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：

项目结构

/packages/button/src/test.vue

<template>
  <div>
    <button :class="[state === 'success' ? 'green' : 'red']">
      button-{{ state }}
    </button>
  </div>
</template>

<script>
export default {
  name: "al-button", // 必写
  props: {
    state: {
      type: String,
      default: "success"
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>

/packages/button/index.js

import AlButton from "./src/main";

AlButton.install = (Vue, opt) => {
  Vue.component(AlButton.name, AlButton);
};

export default AlButton;

/packages/index.js

import AlButton from "./button";

const components = [AlButton];

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,
  AlButton,
};

/src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import pluginDemo from "../packages";
const {AlButton} = pluginDemo;
Vue.use(AlButton);

Vue.config.productionTip = false;

new Vue({
  router,
  render: function(h) {
    return h(App);
  }
}).$mount("#app");

/src/views/test.vue

<template>
  <div class="Container">
    <al-button state="error" />
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

文档树手写的，哈哈哈哈
一个简单的插件已经写完了

在工作中经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以

接下来要写一个发布到npm上，

直接根据 npm install/ npm i 去安装插件/组件库

如果可以请关注我

谢谢！！！

有什么不了解的可以留言