Vue封装组件库打包及发布到私有库

（组件库基于element组件）

1.创建项目

vue create ui

2.引入element-ui

npm i element-ui -S


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.在components文件夹下创建Pagination文件夹再创建组件页面index.vue(以分页为例）

<template>
  <div :class="{ 'hidden': hidden }" class="pagination-container">
    <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
      :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" v-on="$listeners"/>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default:1
    },
    limit: {
      type: Number,
      default:10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageSize: this.limit,
      currentPage:this.page
    }
  },
  computed: {
  },
  watch:{
    limit:{
      handler(newval){
        this.pageSize=newval
      }
    },
    page:{
      handler(newval){
        this.currentPage=newval
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination',  val )
      this.$emit('update:limit', val)
    },
    handleCurrentChange(val) {
      this.$emit('pagination',  val)
      this.$emit('update:page', val)
    }
  }
}
</script>

<style src="./pagination.scss"  lang="scss" scoped>

4.在Pagination文件夹下创建index.js

import Pagination from './index.vue';

Pagination.install=Vue=>{
//kyzh-pagination 分页组件名
  Vue.component("kyzh-pagination",Pagination);
}

export default Pagination;

5.在components文件夹下创建index.js

import Pagination from './Pagination/pagination.vue';
const install = function(Vue) {
 Vue.component("kyzh-pagination",Pagination);
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
   install,
   Pagination
}

6.在package.json修改version

(每次更新前需先修改版本号）

 "version": "0.1.0",

7.在package.json中的scripts中添加命令行

(更改后发布前需重新打包  npm run lib)

"lib": "vue-cli-service build --target lib --dest lib ./src/components/index.js --watch"

8.登录私有库

npm adduser --registry 私有库地址

9.发布到私有库

---

npm publish --registry 私有库地址