vue插件封装、发布到npm详细步骤（实践总结）

前言：

在没有封装组件之前，如果不使用第三方插件，那么很多情况下我们会编写几个常用的组件来提供给页面使用，如Alert/Loading组件，而你可能需要在很多页面中引入并且通过components注册组件，但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用，因此我们需要将他们封装成插件，比如像vux这样的ui组件库，即提供了组件功能也提供了某些全局注册的插件。

一：封装ui组件

1、新建项目（u-scroll-page），初始化项目，输入插件相关信息

npm init

2、新建如下文件

3、插件放到src文件夹中

<template>
  <div>
    <div class="button" @click="fn1">
      click
    </div>
  </div>
</template>
<script>
export default {
  name:"yanButton",
  data(){
    return {

    }
  },
  props:['msg'],
  methods:{
    fn1(){
      alert(this.msg)
    }
  }
}
</script>
<style>
</style>

4、index.js文件，注册插件（可同时注册多个插件）

import UScrollPage from './src/u-scroll-page'

UScrollPage.install = function (Vue) {

    Vue.component(UScrollPage.name, UScrollPage)

    // Vue.component(UScrollPage.name, UScrollPage) 注册多个插件

}

export default UScrollPage

5、在需要引用的项目里面的main.js进行插件引用

import UScrollPage from '../../components/u-scroll-page'   // 插件放的位置
Vue.use(UScrollPage)   // 有暴露install就可以通过Vue.use来调用

6、需要用到插件的组件里面直接引用

<u-scroll-page></u-scroll-page>

二、封装js组件