美文网首页
用Vue封装自己的UI组件库,并发布npm

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

作者: 肖青荣 | 来源:发表于2020-12-19 19:09 被阅读0次
    使用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

    相关文章

      网友评论

          本文标题:用Vue封装自己的UI组件库,并发布npm

          本文链接:https://www.haomeiwen.com/subject/frpcnktx.html