Vue.js - 構建你的第一個包並在NPM上釋出

Sugars發表於2019-04-30
Vue.jsNPM

本文我們將學習如何製作一個vue外掛，並將其分發到npm上，能夠讓其他人安裝使用.

外掛大大地提高了開發者的開發效率。我們的大多數專案都依賴於它們，因為它們能夠以極快的速度釋出新功能。

正如官方Vue.js文件中所述，外掛的範圍沒有限制。通常我們想實現的功能有下面5種:

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

OK，現在你瞭解了vue外掛是什麼了，以及它可以滿足哪些需求！

如何在vue專案中使用外掛

通過npm install或yarn add安裝外掛後，你需要在main.js檔案中匯入它並呼叫Vue.use（）全域性方法。

注意：在new Vue() 前，必須先例項化所有外掛.

import Vue from "vue";
import MyPlugin from "myplugin";

Vue.use(MyPlugin);

new Vue({
// [...]
})
複製程式碼

如果外掛包支援cdn方式引用的話，也可以通過以下方式引用：

<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>
複製程式碼

另外，在你呼叫Vue.use()時，想對外掛做一些自定義配置，你可以這麼做：

Vue.use(MyPlugin, {
 option1: false,
 option2: true
})
複製程式碼

舉個例子，比如在引入熱門的Element UI庫時，它支援傳入一個全域性配置物件

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

Vue.use(Element, {
  // size 用於改變元件的預設尺寸，zIndex 設定彈框的初始 z-index（預設值：2000）
  size: 'small', 
  zIndex: 3000
});
複製程式碼

現在讓我們進入正題！開始構建你的第一個vue外掛?

來製作一個酷炫的按鈕元件

作為一個有追求的前端，相信你們在公司開發專案時，肯定會想過，"要是公司有屬於自己的一套UI元件庫，那肯定很棒！"。 如果你有這個想法，那你認真看完這篇文章後，將會給你帶來很多靈感和啟發。

步驟 1：初始化外掛目錄結構

先建立一個空的專案資料夾，名字隨意取，然後初始化生成package.json檔案（檔案的內容後面會介紹）

$ mkdir ku-button && cd ku-button
$ npm init
# 上面這個命令會提示一些問題，一直回車就行，然後最後會建立一個package.json檔案
複製程式碼

然後在專案根目錄中建立一個src資料夾，裡面新建一個KuButton.vue元件，這裡你甚至可以通過vue的vue serve和vue build命令列來對單個*.vue檔案進行快速原型開發，不過前提需要先額外安裝一個全域性的擴充套件

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global
複製程式碼

安裝完成後，當你成功執行以下命令列後：

$ vue serve KuButton.vue
複製程式碼

就可以直接在瀏覽器訪問 http://localhost:8080/

更多關於vue快速原型開發的知識，你可以檢視官方文件

下面，我們開始完善Button按鈕元件的程式碼，讓它跑起來！

步驟 2: 完善元件程式碼，讓按鈕可配置化

這裡我將模仿ElementUI庫的Button元件，給大家揭曉它的奇妙之處！

模板 Template
<template>
  <button
      :class="[
           'ku-button',
           'ku-button--' + type,
           'ku-button--' + size,
           {
            'ku-button--round': round
           }
          ]"
      @click="onClick">
    <slot></slot>
  </button>
</template>
複製程式碼
JavaScript
<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'default',
        validator(type) {
          return ['default', 'primary', 'info', 'warning', 'danger'].includes(type)
        }
      },
      round: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: "medium",
        validator(size) {
          return ["medium", "small", "mini"].includes(size)
        }
      },
    },

    methods: {
      onClick(event) {
        this.$emit("click", event);
      }
    }
  };
</script>
複製程式碼
樣式 Style
<style>
  .ku-button {
    display: inline-block;
    outline: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    user-select: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }

  /*顏色*/
  .ku-button--default {
  }

  .ku-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .ku-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }

  .ku-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399;
  }

  .ku-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }

  .ku-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }

  /*大小*/
  .ku-button--medium {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
  }

  .ku-button--small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  .ku-button--mini {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  /*是否圓角*/
  .ku-button--round {
    border-radius: 20px;
  }
</style>
複製程式碼

後續我們就可以像這樣使用:

<ku-button type="success" size="mini" round>小按鈕</ku-button>
複製程式碼

雖然我將按鈕模板進行了簡化，但這裡有幾個學習點很重要：

  • 使用了BEM規範。（更多關於BEM的知識，可檢視這裡）
  • 通過props配置接收3個引數（按鈕型別，按鈕大小，按鈕是否為圓角），這樣方便使用者隨時切換不同主題的按鈕。
  • 使用了slot插槽，這樣我們就可以這樣使用按鈕文字
  • 定義了@click事件，當點選元件時會觸發$emit

步驟 3: 寫一個Install方法

文章前面提到了Vue.use()方法，呼叫時它將會執行install方法，這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件。

下面，我們在src中建立一個index.js檔案，然後再裡面寫：

import KuButton from "./KuButton.vue"

export default {
  install(Vue, options) {
    // 註冊全域性元件
    // https://cn.vuejs.org/v2/guide/components-registration.html
    Vue.component("ku-button", KuButton)
  }
}
複製程式碼

到這裡，一個完整的外掛就差不多啦！ ?

步驟 4: 完善根目錄的package.json檔案

開啟剛剛npm init建立的package.json檔案

{
  "private": false,
  "name": "ku-button",
  "version": "1.0.0",
  "description": "A niubility button",
  "author": "sugars",
  "license": "MIT",
  "main": "./dist/index.umd.js",
  "scripts": {
    "dev": "vue serve KuButton.vue"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "bili": "^4.7.3",
    "rollup-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}
複製程式碼

說明：

  • private屬性為false時代表你的包不是私有的，所有人都能檢視並npm install使用
  • name屬性指後續釋出在npm時的包名，請確保你的包名未被註冊
  • version屬性指包的版本號，在你每次釋出更新到npm時，都需要增加版本號。你可以檢視更多語義化版本號的知識
  • description屬性指包的描述資訊，寫上去好讓大家知道你這個包是幹嘛用的
  • main屬性指定了包載入的入口檔案，require('moduleName')就會載入這個檔案。這個欄位的預設值是模組根目錄下面的index.js。
  • scripts屬性指定了執行指令碼命令的npm命令列縮寫，比如build指定了執行npm run build時，所要執行的命令。
  • files屬性可以指定哪些檔案需要被髮布到npm上，比如這裡指定了dist資料夾裡的所有檔案

你可以在npm官方文件檢視更多關於package.json的知識

打包

打包工具這裡我使用的是Bili，一個強大的速度快，零配置的打包工具。

開始安裝打包工具：

$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler
複製程式碼

然後在專案根目錄下建立一個bili.config.js配置檔案，配置如下：

module.exports = {
  banner: true,
  output: {
    extractCSS: false,
    format: ['umd'],
    moduleName: 'KuButton'
  },
  plugins: {
    vue: true
  }
}
複製程式碼

完成後，你只需要執行一個命令就打包完成，就這麼簡單：

$ bili
複製程式碼

打包成功後，在專案根目錄下會生成一個dist資料夾，裡面有個index.umd.js檔案

在npm上分享你的成果

到這裡，你的vue外掛就開發完成了。剩下最後一步，就是在npmjs上釋出你的外掛！ 但前提是你需要有一個npmjs賬號，如果沒有的話需要去註冊一個，有的話可以跳過這一步。

開啟終端，輸入：

$ npm login 
// 回車後，輸入你註冊npmjs時填寫的使用者名稱，密碼和郵箱
// 登入成功後，會提示：Logged in as <username> on https://registry.npmjs.org/.
複製程式碼

檢視當前npm使用者登入情況:

$ npm whoami
// 如果登入成功，輸出的是登入的使用者名稱
複製程式碼

檢查以上步驟都沒問題後，進入剛剛完成的ku-button專案目錄，開始釋出：

$ npm publish
複製程式碼

執行成功後，你的外掛就正式釋出成功了！！?

後續如果要更新外掛，只需要增加package.json裡的version版本號，然後再次執行npm publish釋出更新就可以了！

專案中使用剛釋出的外掛

你可以像安裝其他外掛一樣：

$ npm install --save ku-button
或者
$ yarn add ku-button
複製程式碼

接著，在main.js引用：

import KuButton from "ku-button"
import Vue from "vue"

Vue.use(KuButton)
複製程式碼

最後，在你的頁面中這樣：

<ku-button round type="success" size="small">真酷！!</ku-button>
複製程式碼

Vue.js - 構建你的第一個包並在NPM上釋出

附上 Github地址

到這裡就結束啦！記得給個贊哦！?

如轉載本文請註明文章作者及出處！

相關文章