使用Vue-cli搭建項目

如果你沒有安裝折欠，則執(zhí)行以下命令

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>

那么我們真正用時谓着，可以根據(jù)組件間通信，傳入相關(guān)參數(shù)坛掠，插槽赊锚，方便使用

<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>我是標(biāo)題</h3>
        </template>
        <ul>
         <li>我是內(nèi)容1</li>
         <li>我是內(nèi)容2</li>
         <li>我是內(nèi)容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發(fā)布舷蒲，每次新上傳時需要更改版本
這是我根據(jù)element-ui封裝的一些組件，目前已封裝了7個組件系瓢，
有興趣的可以看看源碼https://gitee.com/xiao-qingrong/qr-ui
這是預(yù)覽鏈接 http://xiao-qingrong.gitee.io/qr-ui