vue外掛開發、文件書寫、github釋出、npm包釋出一波流

愣錘發表於2019-03-04

做vue開發，基本的操作會了之後是不是特想擼一擼vue的外掛，讓自己的程式碼可（騷）復（騷）用（的）。別急，今天和你一起手摸手，哦呸，是手把手，一起擼一管，哦再呸，是封裝一個基於vue的支付寶密碼彈窗外掛。然後還會介紹如何書寫外掛的markdown說明文件、釋出到github、在github設定專案的執行地址、釋出npm包。

簡單看下效果圖，主要實現密碼輸入完成自動觸發輸入完成的回撥函式，自定義標題、自定義高亮顏色、自定義載入動畫，密碼錯誤彈窗，可清空密碼等基本操作。

開發vue外掛之前呢，先說下封裝外掛的目的是什麼？封裝外掛的目的就是為了程式碼的可複用，既然是為了可複用，那麼只要能實現可複用的操作，封裝方式就可以多樣化。這和jq的$.fn.myPlugin = function(){}有些區別。先來看下官方文件對於vue外掛的說明：

外掛通常會為 Vue 新增全域性功能。外掛的範圍沒有限制——一般有下面幾種：

新增全域性方法或者屬性，如: vue-custom-element
新增全域性資源：指令/過濾器/過渡等，如 vue-touch
通過全域性 mixin 方法新增一些元件選項，如: vue-router
新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

MyPlugin.install = function (Vue, options) {
    // 第一種方法. 新增全域性方法或屬性
    Vue.myGlobalMethod = function () {
        // 邏輯...
    }

    // 第二種方法. 新增全域性資源
    Vue.directive(`my-directive`, {
        bind (el, binding, vnode, oldVnode) {
            // 邏輯...
        }
        ...
    })

    // 第三種方法. 注入元件
    Vue.mixin({
        created: function () {
        // 邏輯...
        }
         ...
    })

    // 第五種方法. 新增例項方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // 邏輯...
    }

    // 第六種方法，註冊元件
    Vue.component(元件名, 元件)
}複製程式碼

這些形式都可以作為我們的外掛開發。外掛的本質不就是為了程式碼的複用嗎？根據你的封裝需求選擇不同的形式，例如toast提示可以選擇Vue.prototype，輸入框自動獲取焦點可以選擇Vue.directive指令，自定義元件可以選擇Vue.component的形式。

因為我們的支付密碼框可以看作為一個元件，所以才有Vue.compnent的形式。下面開始搭建基本的一個殼：

為了大家能看到專案執行起來，先初始化一個vue的專案。然後在src新建一個lib資料夾用於存放各個外掛，在lib下新建一個vpay資料夾存放我們的外掛。

在vpay資料夾下，新建一個index.js和一個lib資料夾，而我們真正的外掛是寫在新建的這個lib資料夾中的。這裡之所以這麼建立是因為後面還有在這裡初始化npm包，釋出到npm上：

暫時先不管npm包的內容，這個最後再說。先看外掛這一塊，根據上述內容建立對應檔案。

然後我們開始搭建外掛開發的基本殼子，在外掛的index.js中：

// pay.vue寫我們的元件
import vpay from `./pay`

// 定義我們的外掛
const myPlugin = {    
    // 該外掛有一個install方法
    // 方法的第一個引數是傳入的Vue，第二個引數可以外掛的自定義引數
    install (Vue, options) {
        // 將其註冊為vue的元件，`vpay`是元件名，keyboard是我們開發的元件
        Vue.component(`vpay`, vpay)    
    }
}

// 最後將外掛匯出，並在main.js中通過Vue.use()即可使用外掛
export default myPlugin複製程式碼

待外掛開發好後，就可以在mian.js中這樣使用：

// 引入外掛
import vpay from `./lib/vpay`
// 使用外掛
Vue.use(vpay);複製程式碼

而後在我們的頁面中就可以直接像使用元件的方式使用外掛：

<!--支付密碼彈窗-->
<vpay    
    ref="pays"    
    v-model="show"               
    @close="close"    
    @forget="forget"    
    @input-end="inputEnd"
></vpay>複製程式碼

是不是跟我們平時使用外掛的形式如出一轍？基本思路和外掛的殼子有了，下面就開始開發pay.vue，這外掛的具體內容了。這部分的開發，說的簡單些，其實就和平時寫個父子元件般，因為我們最後想向上面那種自定義元件的形式使用。

pay.vue檔案：

首先是佈局，這裡不多說了，直接上程式碼吧。程式碼略微粗糙，主要用於演示：

<template>    
    <div class="zfb-pay" v-if="show">        
        <div class="content">
            <!--標題欄-->            
            <header class="pay-title">                
                <div class="ico-back" @click="cancel"></div>                
                <h3>{{title}}</h3>            
            </header>
            
            <!--密碼框-->            
            <div class="pass-box">                
                <ul class="pass-area">                    
                    <li class="pass-item"                        
                        :class="{on: password.length > index}"                        
                        v-for="(item, index) in digit"                         
                        :key="index"></li>                                      
                </ul>            
            </div>
 
            <!--忘記密碼-->            
            <div class="forget-pass">                
                <div class="forget-pass-btn" @click="forget">忘記密碼</div>            
            </div>

            <!--鍵盤區-->            
            <ul class="keyboard">                
                <li @click="onKeyboard(1)">                    
                    <p class="num"><strong>1</strong></p>                    
                    <p class="character"></p>                
                </li>                
                <li @click="onKeyboard(2)">                    
                    <p class="num"><strong>2</strong></p>                    
                    <p class="character">ABC</p>                
                    </li>                
                <li @click="onKeyboard(3)">                    
                    <p class="num"><strong>3</strong></p>                    
                    <p class="character">DEF</p>                
                </li>                
                <li @click="onKeyboard(4)">                    
                    <p class="num"><strong>4</strong></p>                    
                    <p class="character">GHI</p>                
                </li>                
                <li @click="onKeyboard(5)">                    
                    <p class="num"><strong>5</strong></p>                    
                    <p class="character">JKL</p>                
                </li>                
                <li @click="onKeyboard(6)">                    
                    <p class="num"><strong>1</strong></p>                    
                    <p class="character">MNO</p>                
                </li>                
                <li @click="onKeyboard(7)">                    
                    <p class="num"><strong>7</strong></p>                    
                    <p class="character">PQRS</p>                
                </li>                
                <li @click="onKeyboard(8)">                    
                    <p class="num"><strong>8</strong></p>                    
                    <p class="character">TUV</p>                
                </li>                
                <li @click="onKeyboard(9)">                    
                    <p class="num"><strong>9</strong></p>                    
                    <p class="character">WXYZ</p>                
                </li>                
                <li class="none"></li>                
                <li class="zero" @click="onKeyboard(0)"><strong>0</strong></li>                
                <li class="delete" @click="deleteKey"></li>                        
            </ul>

            <!--載入中狀態-->            
            <div class="loading-wrap" v-if="payStatus !== 0">                
                <div class="loading">                    
                    <!--載入圖示-->                    
                    <img src="@/assets/loading.png" class="loading-ico" alt="" v-if="payStatus === 1">
                    <img src="@/assets/success.png" class="success-ico" alt="" v-if="payStatus === 2">
                    <!--載入文字-->                    
                    <p v-if="payStatus === 1">{{loadingText}}</p>                    
                    <p v-if="payStatus === 2">{{finishedText}}</p>
                </div>            
            </div>

            <!--支付失敗提示框-->            
            <div class="pay-fail" v-if="isShowFail">                
                <div class="pay-fail-lay">                    
                    <h3 class="title">{{failTip}}</h3>                    
                    <div class="btns">                        
                        <div @click="reInput">重新輸入</div>                        
                        <div @click="forget">忘記密碼</div>                    
                    </div>                
                </div>            
            </div>        
        </div>    
    </div>
</template>複製程式碼

佈局沒什麼可說的，大體說下分為哪些板塊吧：

首先一個全屏的遮罩層，彈窗部分是底部對齊的。
標題欄：可自定義彈窗標題內容
密碼區：位數自定義，例如4位、6位、8位密碼等忘。密碼區黑點通過偽類實現。
忘記密碼跳轉：通過觸發父元件的forget自定義事件，在父元件實現具體的跳轉操作或者其他操作。
鍵盤區：只有數字鍵，支援回刪。可以考慮修改一下增加空白鍵的某些操作。
載入提示區域：有載入中和載入成功兩種狀態。密碼輸入完成自動觸發載入中狀態，並觸發父元件的input-end自定義事件，可在父元件這裡發生支付請求。根據請求結果，要告知外掛支付結果。可以自定義載入中和載入成功的文字，載入成功的提示停留時間等。載入成功後可以通過this.$refs.pays.$success(true).then(res => {}）告知外掛成功結果並在成功提示停留結束後觸發then裡面的操作。
密碼錯誤重新輸入的提示框：當請求結果為密碼錯誤時，可以在父元件通過this.$refs.pays.$fail(false)呼叫外掛的方法告知外掛支付結果為密碼錯誤，外掛會彈出錯誤的提示框。以上程式碼由於是已經寫好了外掛然後直接拷貝的，所以上面插入了變數和方法等。

佈局完成後，下面開始介紹實現:

export default {
    data() {        
        return {            
            password: ``, // 支付密碼            
            payStatus: 0, // 支付狀態，0無狀態， 1正在支付，2支付成功            
            failTip: `支付密碼錯誤`, //             
            isShowFail: false        
        }    
    },
}複製程式碼

1. 在data中定義一個password變數，用於存放輸入的支付密碼。鍵盤區的每個數字按鍵對應一個鍵值（0-9）。點選數字按鍵時獲取對應的鍵值並賦值更新password的值，對應如下methods的onKeyboard方法：

// 點選密碼操作
onKeyboard(key) {            
    // 只擷取前六位密碼
    this.password = (this.password + key).slice(0, 6);        
},複製程式碼

同時通過在watch鉤子裡面，監聽password，在password長度達到設定的長度後（例如輸入完6位後）通過$emit(`input-end`)通知父元件的自定義事件，可以理解為輸入完成後的回撥函式：

watch: {        
    // 監聽支付密碼，支付密碼輸入完成後觸發input-end回撥 
    // 通知父元件的同時會把輸入完成的密碼作為引數告知父元件，即input-end函式的引數能拿到密碼
    password (n, o) {            
        if (n.length === this.digit) {                
            this.payStatus = 1;                
            this.$emit(`input-end`, this.password)                            
        }            
    }    
},複製程式碼

this.digit是通過prop傳遞的值，用於設定支付密碼框的位數，預設六位：

// 支付密碼框位數        
props: {
    // 支付密碼框位數    digit: {            
        type: Number,            
        default: 6        
    },
}複製程式碼

2. 完成了密碼的輸入，開始做密碼的回刪，即每次回刪，刪除password的最後一位數，有點類似演算法裡面的堆（後進先出），有點扯遠了，這裡用不到：

// methods中的方法，密碼回刪
deleteKey(){            
    // 密碼已經為空時，不回刪            
    if (this.password.length === 0) return;            
    // 回刪一位密碼            
    this.password = this.password.slice(0, this.password.length - 1);        
},複製程式碼

密碼長度為0時不再回刪，不為0時每次擷取0到長度減一的位置為新密碼，即去掉了最後一位密碼。

3.說到了密碼輸入達到指定的長度後會自動觸發父元件的自定義事件，這個是寫在父元件的，等下演示呼叫外掛的時候會介紹。那麼對應的也會有取消支付彈窗的操作，即點選彈窗左上角的返回按鈕取消支付，關閉彈窗：

// 取消支付        
cancel () {            
    // 支付過程中，不允許取消支付            
    if (this.payStatus === 1) return;            
    // 清空密碼            
    this.password = ``;            
    // 恢復支付狀態            
    this.payStatus = 0;            
    // 關閉元件，並觸發父子元件資料同步            
    this.$emit(`change`, false);            
    // 觸發父元件close自定義事件            
    this.$emit(`close`);        
},複製程式碼

取消的時候首先要判斷當前的支付狀態，如果是正在支付的狀態，則是不允許取消的。這裡的在data中已經有過定義，主要payStatus有三個值：0無狀態，1支付中，2支付成功。然後就是清空密碼、初始化支付的狀態、關閉彈窗、同時告知父元件使得父元件可以有一個close的自定義事件寫回撥函式。

由於支付彈窗的顯示隱藏是由父元件傳遞的值控制的，所以這裡在元件內改變了父元件傳遞的值後也要對應的更新父元件的值，即this.$emit(`change`, false)：

如圖我們在使用外掛的時候，想通過v-model的值來控制元件的顯示隱藏，就像很多庫一樣使用v-model。所以這裡展示如何操作能通過v-model實現：

還是元件的prop屬性，通過prop的show屬性來控制元件的顯示隱藏：

// 元件的顯示隱藏
show: {            
    type: Boolean,            
    required: true,            
    default: false        
},複製程式碼

然後在model的鉤子中：

model: {        
    prop: `show`,        
    event: `change`    
},複製程式碼

最後是在html中通過該欄位控制顯示隱藏。v-model的內容這裡不多做介紹，回頭這裡更新一個連線地址，在另一篇裡面有詳細的介紹。

4. 下面就是當你密碼輸入完成後，自動觸發父元件的input-end回撥，你在input-end回撥中發起了支付請求，這時後臺會返回給你支付狀態，例如支付成功或者密碼錯誤。未設定支付可以在吊起支付彈窗以前就去判斷或者提示。當你拿到支付的結果後，要通過呼叫外掛的$success方法或者$fail方法告知外掛你的支付結果。如下圖我們先看怎麼使用的，然後再說怎麼在外掛中實現$success方法和$fail方法：

呼叫pay-keyboard的時候，定義了ref="key"，於是我們就可以通過this.$refs.pay指向當前外掛例項。用法很簡單，註釋寫的也比較清楚就不解釋了。下面是外掛的$success方法:

//支付成功        
$success () {            
    return new Promise((resolve, reject) => {                
        // 支付成功立即顯示成功狀態                
        this.payStatus = 2;                
        // 待指定間隔後，隱藏整個支付彈窗，並resolve                
        setTimeout(() => {                    
            this.cancel();                    
            resolve();                
        }, this.duration);            
    })        
},複製程式碼

該方法返回一個promise物件，promise會立即執行。返回promise是為了呼叫時通過then方法寫回撥，更優雅一些。在promise內，進行了支付狀態的更改，然後在設定的支付成功狀態顯示的時間結束後關閉彈出並resolve。所以this.$refs.pay.$success().then()方法中的操作會在等待成功提示結束、也就是彈窗隱藏掉之後執行。

// 支付失敗        
// 隱藏載入提示框，顯示支付失敗確認框        
$fail (tip) {            
    tip && typeof tip === `string` && (this.failTip = tip);
    // 隱藏掉支付狀態視窗            
    this.payStatus = 0;
    // 顯示密碼錯誤彈窗            
    this.isShowFail = true;        
},複製程式碼

$fail方法就是外掛在得知支付結果為密碼錯誤的時候，顯示出密碼錯誤的彈窗。密碼錯誤彈窗的提示是可自定義的。通過tip引數獲取自定義的錯誤提示。

該錯誤提示彈窗，有兩個按鈕，有一個重新輸入，一個忘記密碼。

點選重新輸入，肯定是要隱藏該彈窗，然後情況已經輸入的密碼。由此，在methods中寫一個reInput方法來實現該功能：

// 重新輸入        
// 清空之前輸入的密碼，隱藏支付失敗的提示框        
reInput () {            
    this.password = ``;            
    this.isShowFail = false;        
},複製程式碼

這樣就可以重新輸入支付密碼了。

忘記密碼，這裡我們可以將點選後操作的控制權交給父元件。所以，我們寫一個忘記密碼的點選後的方法，這裡的忘記忘記密碼可以和上面密碼區的忘記密碼作為同一個操作。當然了你也根據自己的需求開發出區分開的操作。這裡是作為同一個的操作：

// 忘記密碼,觸發父元件的forget自定義事件        
forget () {            
    this.$emit(`forget`);        
}複製程式碼

由此，便可以在父元件的@forget自定義事件中進行一個連線的跳轉等操作。

當然了，我們的prop接收的引數還有以下這些：

// 彈窗標題        
title: {            
    type: String,            
    default: `請輸入支付密碼`        
},        
// 正在支付的文字提示        
loadingText: {            
    type: String,            
    default: `正在支付`        
},        
// 支付成功的文字提示        
finishedText: {            
    type: String,            
    default: `支付成功`        
},        
// 支付成功的提示顯示時間        
duration: {            
    type: Number,            
    default: 500        
}複製程式碼

通過這些prop引數，我們可以在初始化外掛的時候進行配置。

外掛開發完成後就是呼叫啦，在我們的main.js中先引入我們的外掛，而後進行初始化外掛：

// 引入外掛，位置是你的外掛位置
import payPassword from `./lib/zfc-password`
// 初始化外掛
Vue.use(payPassword)複製程式碼

然後在我們的頁面內這樣使用：

<vpay          
    v-model="show"                       
    ref="pays"            
    @close="close"            
    @forget="forget"            
    @input-end="inputEnd"      
></vpay>
複製程式碼

到此我們的外掛基本就開發完成了。已經提交github，送上github專案地址和demo地址，自行查閱。

外掛寫完了，我們還要簡單寫一個外掛的使用文件。例如我們在github看到的元件庫都是有使用說明的，包括api啊、事件說明等。有圖有真相，上圖：

是不是很熟悉呢！沒錯，這就是markdown格式的說明文件。說到markdown，其實也不少內容的，但是我們只說一些常用的寫markdown文件的語法，這些已經足夠我們平時寫文件用了。

Markdown 是一種輕量級標記語言，創始人為約翰·格魯伯（John Gruber）。它允許人們“使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML(或者HTML)文件”。這種語言吸收了很多在電子郵件中已有的純文字標記的特性。

markdown使用途徑很久，很多寫作等都是使用的markdown文件，包括我們的掘金寫作也是可以切換markdown穩當的。下面就說說markdown的常見語法吧。在我們vue建立的根目錄，你會發現有一個reaame.md檔案，這個檔案就可以用來書寫專案的說明文件。如果專案傳到github上面，這個文件對應的就是如上圖所示的使用文件說明。

markdown文件每種格式都有其他的書寫方式，這裡只介紹其中常見的一種或者說話是個人比較喜歡的形式：

標題的書寫形式，對應h1,h2,h3,h4,h5,h6

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題複製程式碼

效果圖：

無序列表和有序列表：

* 1111
* 2222
* 3333

1. 1111
2. 2222
3. 33334. 4444複製程式碼

效果圖：

表格的書寫：

| 事件名 | 說明 | 引數 |
| - | :- | :- | :-: |
| input-end | 密碼輸入完成後的回撥函式 | - |
| close | 密碼彈窗關閉後的回撥函式 | - |
| forget | 點選忘記密碼的回撥函式 | - |複製程式碼

表格這裡說一下，第一行對應表格的標題，第二行將表格標題和表格內容分開，並且在這裡可以定義表格對齊方式，即| – | 預設左對齊，| :- |在左邊新增：表示這一列左對齊，右邊加：則這一列右對齊，兩邊都加：則居中對齊。

引入程式碼塊：

```javascript
this.$refs.pays.$success(true).then(res => {    
    console.log(`支付成功`)     
    this.$router.push(`/success`)
})
```複製程式碼

即兩個```之間可以新增程式碼塊。是esc按鍵下的那個鍵，不是單引號。

引入圖片：

![支付密碼框演示動圖](./static/pay.gif)複製程式碼

通過![圖片說明](圖片路徑)便可以引入圖片。效果如上圖演示的動態圖。

引入超連結：

[demo演示頁面](https://chinaberg.github.io/vpay/dist/#/, `支付密碼彈窗demo演示頁面`)複製程式碼

[]設定連結名稱，()中第一個引數為連結地址，第二個引數為連結的title屬性值，第二個引數可選。效果如圖：

markdown文件的書寫語法暫且介紹這些最最常用的一些。更多的markdown語法，請檢視相關文件。

外掛上傳github，並設定專案的demo預覽網址。

外掛開發好了，文件說明也寫好了，下面就是上傳github、設定github的專案展示頁，然後分享給更多的人。

首先要有github賬號，這個就不說了，必備的。
在github上新建一個專案：右上角點選加號，選擇New repository新建一個專案，輸入專案名->專案描述->建立專案

建立成功後提示的這些命令是git的一些基本命令，還有怎麼使用git連線github遠端庫、怎麼推送遠端庫如果對git還不瞭解的話，先去網上簡單學習一下git的基本操作，然後再進行後續的操作吧。網上廖雪峰的git教程比較適合入門，剛開始學習起來比較簡單。

在專案中開啟終端或者通過cmd命令列開啟，我這裡演示的vscode編輯器的終端：

由於我們的vue專案是需要打包後才能執行的。所以我們要先npm run build打包專案。打包後你可以開啟根目錄下的dist資料夾，裡面有一個index.html檔案，開啟執行試下，如果是白屏（一定是白屏），那就是路徑不對，這裡需要你修改打包路徑，具體的不細說了，在另一篇文章有提到打包後資源路徑不對的解決辦法。這裡送上鍊接，很簡單，增加一個配置就好。
打包完成後，通過git初始化我們的專案，最基本的步驟：

git init 初始化git專案
git checkout -b master 新建一個master分支
由於vue-cli的預設配置，設定了git忽略監控我們打包後的dist資料夾，所以這裡我要取消忽略，讓git監控dist資料夾，不然提交遠端庫的時候不會提交dist資料夾：開啟根目錄下的.gitignore檔案，這是git的配置檔案，可以在這裡設定git不需要監控的檔案型別。所以我們在這裡把/dist/這行程式碼刪除，這樣，後面我們再git add .的時候就會監控dist資料夾了。此時如果執行git status命令，可以看到git已經開始監控dis資料夾了
git add . 注意，這裡有一個點，而且點和add直接有空格。
git commit -m"初始化支付寶密碼彈窗" git本地提交
在本地提交後，我們需要連線github遠端庫：git remote add origin git@github.com:chinaBerg/my-project.git，後面的地址是你的遠端庫的ssh地址，這裡不要拷貝我的地址了，你連線我的遠端庫是不會成功的。然後執行git remote -v檢視一下是否連線成功：可以看到我的遠端庫已經連線成功了。下面就開始講本地的程式碼推送到遠端庫。
第一次提交，由於本地的分支沒有和遠端的分支進行關聯，所以我們第一次push的時候，要先關聯遠端庫：git push -u origin master ，其中-u origin master 表示將當前的分支關聯到遠端的master分支，這樣你提交的時候當前的本地分支的內容就會提交到遠端的master分支上。

可以看到已經提交成功了。接下來我們開啟github上面的專案看下，重新整理後看到，專案以上傳到遠端了，其中既有我們的原始碼，也有打包後的dist檔案，也有我們之前寫好的readme.md說明文件：

檔案上傳以後，我們怎麼設定才能在github上檢視執行的專案的呢？

在當前專案中，點選setttings選項，選擇Options選項卡，拉倒底部的位置，找到GitHub Pages區域，點選下拉選單將選擇master branch選項，然後點選save按鈕儲存。

然後我們就會看到，這個位置有一個url地址。沒錯，這個就是我們的專案路徑，但是呢，我們打包後能允許的專案是在dist資料夾下，所以我們想訪問打包後的專案的話，只要在這個路徑後面拼接，例如：https://chinaberg.github.io/my-project/dist/index.html 你現在訪問我這個專案可能不存在了，因為我已經刪除了。

至此，我們上傳github的操作已經完成了。

其實這裡主要用到的知識就是git的使用。使用git對我們的程式碼進行版本控制和連線遠端庫等，都是我們作為開發人員基本必須要會的一項技能，希望還不會git的小夥伴要抽點時間學習一下。不然這裡估計會坑的想放棄呢！

釋出npm包，更方便以後下載使用。

我們已經把外掛程式碼上傳到github上面了，那麼我們是否可以也做成一個npm包釋出到npm上呢？答案是肯定的，如此一次，我們在需要使用到該外掛的時候就可以直接npm i vpay等的實現安裝到我們的專案中，豈不是很方便呢？

正如文章剛開始提到的檔案目錄，我們是把外掛都寫在了第二個lib中的。而整個vpay資料夾都是我們要作為npm包釋出的。其中readme.md是說明文件，跟github上的一樣，你可以簡單的先拷貝根目錄下的那個。

然後是vpay檔案下面的index.js，裡面就依據程式碼，即匯出我們的外掛：

module.exports = require(`./lib`)複製程式碼

由於我們在使用外掛的時候，其實引入的就是這個index.js，所以在這個檔案中，我們匯出了我們的外掛。

而下面重點要說的是這個package.json檔案，這個一開始是沒有的，這是npm包的配置檔案。我們要首先進入vpay資料夾的位置，然後終端執行npm init命令來初始化一個npm包配置檔案，此時他會問你一些列問題來完成配置檔案：

name：包名，預設是資料夾名。但是這個名字是需要唯一的，如果你命的名字已經被使用過了，那就只能換個名字。至於怎麼檢視包名是否存在，你可以去npmjs官網搜尋你的包名，如果沒搜尋到則可以使用。

version：包的版本，預設是1.0.0，你可以更換，例如0.1.0或2.0.1等。

description：包的描述。主要描述你的包是用來做什麼的。

entry point：包入口檔案，預設是Index.js，可以自定義。

test command：測試命令，這個直接回車就好了，因為目前還不需要這個。

git repository：包的git倉庫地址，npm自動讀取.git目錄作為這一項的預設值。沒使用則回車略過。

keyword：包的關鍵詞。該項會影響到使用者怎樣才能搜到你的包，可以理解為搜尋引擎悠哈的關鍵詞。建議關鍵詞要能準確描述你的包，例如：”vpay vue-pay vue-password password”

author：作者。例如你的npm賬號或者github賬號

license：開源協議，回車就好。

到這一步，其實我們已經做好了本地包的開發，我們要測試一下包能不能使用。怎麼測試呢？我們知道，平時是使用npm安裝外掛的時候，其實是把外掛安裝在了根目錄下的node_modules檔案中。那麼，我們既然已經開發好了本地包，我們就把這個vpay資料夾直接拷貝到node_modules資料夾中。然後在main.js中像平時一樣使用外掛：

// 直接引入vpay,不需要寫路徑
import vpay from `vpay`

Vue.use(vpay);複製程式碼

測試一看，一切正常，說明我們的包是沒問題的。

下面就是要釋出了。釋出之前，我們首先要有一個npm的賬號，如果你還沒有賬號的，自行去npmjs官網註冊一個賬號，這裡提示一下，註冊使用者名稱的時候經常可能不通過，所以還是字母開頭加一些數字方便些。這裡的full name 可以理解為暱稱，email郵箱，後面兩個是使用者名稱和密碼。有些時候使用者名稱總是會提示不合規範，所以還是字母加數字快些。

迴歸正題，先切換到我們的vpay檔案目錄，然後執行npm login命令登入我們的npm賬號，他會提示你輸入npm的使用者名稱和密碼，注意輸入密碼的時候不會有任何提示，這裡不要以為是不是沒有反應。你只管輸入就好，只不過什麼都看不到，輸入完成回車，然後輸入npm的郵箱。最後回車，這裡有一點要注意的，如果你是之前安裝了淘寶映象，那是不會成功的，因為你的要把npm包釋出到npm映象上，而不是淘寶的映象。我們平時可以通過淘寶映象來加快下載速度，因為淘寶映象其實就是每隔十分鐘把npm的上的最新資源同步到自己身上而已。所以你要通過npm的映象登入和釋出。

如果配置了淘寶映象，先設定回npm映象：

npm config set registry http://registry.npmjs.org 複製程式碼

然後在終端執行npm login命令：

看到最後一行Logged in as ……就說明登入成功了。

登入成功後，執行npm publish命令將npm包釋出到npm上。

這樣就釋出成功了。我們去npm官網查一下我們的包：

如果釋出成功後沒有搜到，就稍微等幾分鐘。

點選進去看下，一切正常。以後就直接可以通過npm i vpay將外掛撞到我們的專案中了。

到這，我們基本已經完成了外掛從開發、到寫說明文件、再到釋出github、最後釋出npm包，一切已經可以正常使用了。外掛的個別地方的樣式有些略顯粗糙，但是本文的主要目的在於演示外掛的開發過程。希望能對有需要的小夥伴起到幫助。

❤如果覺得喜歡就收藏一下或者start一下唄~~❤

gitHub，檢視demo， npm

開發釋出npm module包
2017-12-05
NPM
vue 外掛開發教程與釋出
2018-04-25
Vue
vue外掛-(elementui-dropdown)開源包的開發和釋出
2019-02-28
VueUI
npm製作外掛、釋出及更新
2018-12-28
NPM
如何釋出一個 npm 包
2020-05-31
NPM
基於刮刮卡Vue元件釋出一個NPM包
2019-03-16
Vue元件NPM
使用 Github Action 釋出 Flutter 外掛
2020-07-29
GithubFlutter
Vue外掛打包與釋出
2018-08-16
Vue
釋出npm包流程
2024-07-29
NPM
如何釋出一個 TypeScript 編寫的 npm 包
2022-11-30
TypeScriptNPM
NPM包（模組）釋出、更新、撤銷釋出
2019-01-29
NPM
npm包釋出記錄
2018-12-30
NPM
初試npm包釋出
2016-12-25
NPM
釋出一款npm包幫助理解npm
2018-12-27
NPM
VS Code外掛開發中文文件-v2.0釋出啦!
2019-04-01
如何設計npm包的開發和釋出流程
2019-04-20
NPM
Vue外掛從封裝到釋出
2019-02-27
Vue封裝
釋出/撤銷NPM私有包
2019-01-07
NPM
如果釋出和使用npm包
2020-10-24
NPM
flutter外掛編寫及釋出流程
2021-03-29
Flutter
利用github Actions釋出npm和release
2021-07-30
GithubNPM
ChatGPT for SegmentFault 外掛釋出！
2023-02-13
ChatGPT
?vue元件釋出npm最佳實踐
2018-06-15
Vue元件NPM
如何釋出一個公共的 vue 元件到 npm
2022-05-13
Vue元件NPM
萬物根源-一分鐘教你釋出npm包
2019-03-08
NPM
如何釋出第一個屬於自己的npm包
2019-02-16
NPM
[譯] 建立併釋出一個小而美的 npm 包
2019-01-03
NPM
Firebug 2.0.7 釋出，Firefox 網頁開發外掛
2014-12-11
Firefox網頁
Firebug 2.0.9 釋出，Firefox 網頁開發外掛
2015-04-11
Firefox網頁
Vue.js - 構建你的第一個包並在NPM上釋出
2019-04-30
Vue.jsNPM
一分鐘釋出一個屬於自己的npm包
2018-04-21
NPM
記錄下學習釋出一個包到npm上
2018-08-20
NPM
說說Chrome外掛從開發除錯到打包釋出
2018-07-24
Chrome除錯
「3步」釋出 Laravel 外掛 (二)
2018-02-21
Laravel
5 分鐘教你快速掌握 GitHub Actions 自動釋出 Npm 包和網站
2022-04-25
GithubNPM網站
從開發到釋出一款基於Vue2x的圖片預覽外掛
2018-05-13
Vue
手把手教你釋出一個vue元件到npm上
2019-03-01
Vue元件NPM
Github Action釋出
2021-08-26
Github

vue外掛開發、文件書寫、github釋出、npm包釋出一波流

外掛寫完了，我們還要簡單寫一個外掛的使用文件。例如我們在github看到的元件庫都是有使用說明的，包括api啊、事件說明等。有圖有真相，上圖：

外掛上傳github，並設定專案的demo預覽網址。

釋出npm包，更方便以後下載使用。

相關文章