基于vue-cli封装自己的ui组件库并上传到npm

一、在与src目录同级下新建一个packages文件夹，这个文件夹存储组件源码。

然后在packages下新建一个index.js用于统一导出组件。
假如我们现在要封装一个Button组件，此时应该在packages文件夹下新建一个button文件夹，用于存放button组件的源码。

然后在button文件夹下新建一个index.js，用户导出button组件。

然后在button文件夹下新建一个button.vue和button.less，用于写button组件的结构和样式的。

button.vue

<template>
  <button
      class="button"
      @click="handleClick"
      :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: "Button",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style lang="less" scoped>
@import "button.less";
</style>

button.less

.button{
  color: pink;
}

button/index.js

/**
 * button组件的导出
 */

import Button from './src/button'
console.log('====',Button)

Button.install = function(Vue){
    Vue.component(Button.name,Button)
}

export default Button

然后在packages/index.js统一导出组件

/**
 * 统一导出组件
 */

import Button from './button'

//组件集合，用于遍历
const components = [Button]

//定义install方法
const install = function(Vue){