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

本文咱們將學習如何製做一個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>
複製代碼

附上 Github地址

到這裏就結束啦！記得給個贊哦！👍

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