用Vue封装自己的UI组件库，并发布npm

使用Vue-cli搭建项目

如果你没有安装，则执行以下命令

npm install  -g @vue/cli
# or
yarn global add @vue/cli
vue create my-vue-library

新建一个lib文件来作为所有组件的源，这里我用自己封装的一个Dialog组件为例,这里我省去了样式

<template>
  <transition name="dialog-fade">
  <div class="qr-dialog_wrapper" v-show="visible" @click.self="handleClose">
    <div class="qr-dialog" :style="{width, marginTop: top}">
      <div class="qr-dialog_header">
        <slot name="title">
        <span class="qr-dialog_title">{{title}}</span>
        </slot>
        <div class="qr-dialog_headerbtn" @click="handleClose">
          <i class="qr-icon-close"></i>
        </div>
      </div>
      <div class="qr-dialog_body">
       <slot></slot>
      </div>
      <div class="qr-dialog_footer" v-if="$slots.footer">
        <slot name="foot">
          <qr-button @click="handleClose">取消</qr-button>
          <qr-button type="primary" @click="handleClose">确定</qr-button>
        </slot>
      </div>
    </div>
  </div>
  </transition>
</template>

<script>
export default {
  name: 'qrDialog',
  components: {
  },
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    footer: {
      type: Object
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false) 
    }
  }
}
</script>

那么我们真正用时，可以根据组件间通信，传入相关参数，插槽，方便使用

<template>
<div class="box1">
  <div class="dialog">
      <qr-button @click="visible = true">打开对话框</qr-button>
      <qr-dialog width="25%" top="150px" :visible.sync="visible">
        <template v-slot:title>
          <h3>我是标题</h3>
        </template>
        <ul>
         <li>我是内容1</li>
         <li>我是内容2</li>
         <li>我是内容3</li>
        </ul>
        <template v-slot:footer>
          <qr-button>取消</qr-button>
          <qr-button type="prinary">确定</qr-button>
        </template>
      </qr-dialog>
  </div>
    <div class="show">
      <span @click='ShowMsg'>{{msg}}</span>
     <div class="markdown-body" v-show="isShow" >
       <dialog1-md></dialog1-md>
     </div>
   </div>
</div>
</template>

之后我们将所有封装组件打包，登录npm账号，通过npm publish发布，每次新上传时需要更改版本
这是我根据element-ui封装的一些组件，目前已封装了7个组件，
有兴趣的可以看看源码https://gitee.com/xiao-qingrong/qr-ui
这是预览链接 http://xiao-qingrong.gitee.io/qr-ui