封装vue组件库，发布到npm

封装vue组件库

组件库的开发和平时项目中组件的开发过程是一样的，不同的是组件库作为一个插件使用，使用Vue.use()注册插件。

Vue.use方法可以接收一个函数，如果是函数会直接调用这个函数；可以传入对象，传入对象，会调用这个对象的install方法。

vue规定插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。

如果是直接引入组件库(如：上传cnd引入)，那么需要在封装组件库时判断是否是window，并且window有Vue，就install(window.Vue)

组件开发

在根目录下新建一个packages文件夹存放所有的组件，在packages目录下新建一个button文件夹，下面新建一个main.vue和index.js

main.vue文件变形组件相关的业务，和平时项目中开发的组件一样

<template>
  <button class="yun-button" :class="[`yun-button--${type}`,{
  'is-plain': plain,
  'is-round': round,
  'is-circle': circle,
  'is-disabled': disabled
  }]"
          :disabled="disabled"
          @click="handleClick">
    <i v-if="icon" :class="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

index.js文件中主要是编写一个install，供按需引入

// 导入组件，组件必须声明 name
import MyButton from './src/button'

MyButton.install = function (Vue) {
  // 为组件提供 install 安装方法，供按需引入
  Vue.component(MyButton.name, MyButton)
}

export default MyButton

到这里我们的button组件已经封装好了，回到packages目录新建一个index.js文件，该文件作为整个组件库的入口，在该文件中引入所有的组件，遍历组件添加install方法，以及对直接引入组件库做处理

import MyButton from './button'

const components = [MyButton]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 判断是否直接引入文件(通过连接引入组件库)，如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  MyButton
}

到这里组件库已经封装完毕，只需要引入项目就可以使用了

在项目的main.js中引入并且使用Vue.use()注册

import MyUi from '../packages'
Vue.use(MyUi)

组件库打包发布npm

vue-cli 构建目标为库的介绍

根目录添加vue.config.js文件修改打包配置

const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项....
        return options
      })
  }
}

在package.json添加打包命令把packages打包"lib": "vue-cli-service build --target lib packages/index.js"

代码上传GitHub托管

修改package.json：private属性值改为 false，私有包npm不让上传；name属性值要npm上没有的；添加main属性，值为入口文件路径，该属性是一定要指定的(如："main": "dist/myui.umd.min.js")，将来导入到项目将会默认导入该文件

根目录添加.npmignore文件，用于配置忽略文件不被npm上传

上传npm：源需要是npm，不能是淘宝源；npm login登录(需要先注册账号)；npm publish发布

以后修改后再上传需要修改package.json中的version属性，否则上传不了

封装vue组件库，发布到npm