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) 注冊多個插件 
           
          
            } 
           
           
            
            
              // 支持使用標簽的方式引入Vue  是全局變量 
             global 情況下 自動安裝 
             
            
              if (typeof window !== 'undefined' && window.Vue) { 
             
            
                  install(window.Vue) 
             
            
              } 
             
            
           
          
            export default UScrollPage 
           
         

說明：在注冊組件的時候，如果有加以下這段自動注冊的代碼，那么在用npm install安裝依賴的時候，改插件就會被自動安裝，如果沒有加以下自動安裝代碼，那么使用npm install新增的依賴並不會自動安裝，需要手動安裝缺少的依賴。

if (typeof window !== 'undefined' && window.Vue) {

    install(window.Vue)

}

 

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

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

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

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

補充： 

同時注冊多個組件

1、在src下的common文件下新建component文件夾用來存放我們的公用全局組件。如下圖：

 

 

 2、在index.js文件中倒入所有的組件，並封裝成install 方法導出。如下：

import boxShow from './boxShow'
import boxTip from './boxTip'

const commontCop = { // 導出一個對象，並且給對象里添加install屬性方法
  install(vue) { // 這形式參數vue 在vue.use方法被掉用的時候傳入vue的實例對象
    vue.component('boxShow', boxShow)
    vue.component('boxTip', boxTip)
  }
}
export default commontCop

導出一個對象，並且給對象里添加install屬性方法
這里的式參數vue 在vue.use方法被掉用的時候傳入vue的實例對象，就是上面源碼分析中的這一段： plugin.install.apply(plugin, args) 。args中的第一個參數就是unshift進去的vue的實例對象
3、在main.js中直接使用vue.use注冊成為全局組件。如下：

 

 4. 這樣注冊好，就可以全局愉快的使用了哦哦。像這樣調用：

注意：我們也可以在main.js中直接使用vue.component方法注冊組件，可以參考以前寫的文章項目實戰之vue爬坑之路：vue框架中如何注冊全局公共過濾器filter、全局公共插件、全局公共組件component
這個方法有個缺點就是這能一個一個注冊，也就是說如果要注冊多個全局組件，你只能在main.js中寫多個vue.component方法

二、封裝js組件