Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟

更新時(shí)間：2019年05月01日 16:30:57 作者：Sugars

這篇文章主要介紹了Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文我們將學(xué)習(xí)如何制作一個(gè)vue插件，并將其分發(fā)到npm上，能夠讓其他人安裝使用.

插件大大地提高了開(kāi)發(fā)者的開(kāi)發(fā)效率。我們的大多數(shù)項(xiàng)目都依賴(lài)于它們，因?yàn)樗鼈兡軌蛞詷O快的速度發(fā)布新功能。

正如官方Vue.js文檔中所述，插件的范圍沒(méi)有限制。通常我們想實(shí)現(xiàn)的功能有下面5種:

添加全局方法或者屬性 (如: vue-custom-element)
添加全局資源：指令/過(guò)濾器/過(guò)渡等 (如：vue-touch)
通過(guò)全局 mixin 方法添加一些組件選項(xiàng) (如：vue-router)
添加 Vue 實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn) (如：vue-axios)
一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能（如：vue-router）

OK，現(xiàn)在你了解了vue插件是什么了，以及它可以滿(mǎn)足哪些需求！

如何在vue項(xiàng)目中使用插件

通過(guò)npm install或yarn add安裝插件后，你需要在main.js文件中導(dǎo)入它并調(diào)用Vue.use（）全局方法。

注意：在new Vue() 前，必須先實(shí)例化所有插件.

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

Vue.use(MyPlugin);

new Vue({
// [...]
})

如果插件包支持cdn方式引用的話(huà)，也可以通過(guò)以下方式引用：

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

另外，在你調(diào)用Vue.use()時(shí)，想對(duì)插件做一些自定義配置，你可以這么做：

Vue.use(MyPlugin, {
 option1: false,
 option2: true
})

舉個(gè)例子，比如在引入熱門(mén)的Element UI庫(kù)時(shí)，它支持傳入一個(gè)全局配置對(duì)象

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

Vue.use(Element, {
 // size 用于改變組件的默認(rèn)尺寸，zIndex 設(shè)置彈框的初始 z-index（默認(rèn)值：2000）
 size: 'small', 
 zIndex: 3000
});

現(xiàn)在讓我們進(jìn)入正題！開(kāi)始構(gòu)建你的第一個(gè)vue插件💪

來(lái)制作一個(gè)酷炫的按鈕組件

作為一個(gè)有追求的前端，相信你們?cè)诠鹃_(kāi)發(fā)項(xiàng)目時(shí)，肯定會(huì)想過(guò)，"要是公司有屬于自己的一套UI組件庫(kù)，那肯定很棒！"。
如果你有這個(gè)想法，那你認(rèn)真看完這篇文章后，將會(huì)給你帶來(lái)很多靈感和啟發(fā)。

步驟 1：初始化插件目錄結(jié)構(gòu)

先創(chuàng)建一個(gè)空的項(xiàng)目文件夾，名字隨意取，然后初始化生成package.json文件（文件的內(nèi)容后面會(huì)介紹）

$ mkdir ku-button && cd ku-button
$ npm init
# 上面這個(gè)命令會(huì)提示一些問(wèn)題，一直回車(chē)就行，然后最后會(huì)創(chuàng)建一個(gè)package.json文件

然后在項(xiàng)目根目錄中創(chuàng)建一個(gè)src文件夾，里面新建一個(gè)KuButton.vue組件，這里你甚至可以通過(guò)vue的vue serve和vue build命令行來(lái)對(duì)單個(gè)*.vue文件進(jìn)行快速原型開(kāi)發(fā)，不過(guò)前提需要先額外安裝一個(gè)全局的擴(kuò)展

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

安裝完成后，當(dāng)你成功執(zhí)行以下命令行后：

$ vue serve KuButton.vue

就可以直接在瀏覽器訪問(wèn) http://localhost:8080/

更多關(guān)于vue快速原型開(kāi)發(fā)的知識(shí)，你可以查看官方文檔

下面，我們開(kāi)始完善Button按鈕組件的代碼，讓它跑起來(lái)！

步驟 2: 完善組件代碼，讓按鈕可配置化

這里我將模仿ElementUI庫(kù)的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>

后續(xù)我們就可以像這樣使用:

<ku-button type="success" size="mini" round>小按鈕</ku-button>
雖然我將按鈕模板進(jìn)行了簡(jiǎn)化，但這里有幾個(gè)學(xué)習(xí)點(diǎn)很重要：

使用了BEM規(guī)范。（更多關(guān)于BEM的知識(shí)，可查看這里）
通過(guò)props配置接收3個(gè)參數(shù)（按鈕類(lèi)型，按鈕大小，按鈕是否為圓角），這樣方便使用者隨時(shí)切換不同主題的按鈕。
使用了slot插槽，這樣我們就可以這樣使用<ku-button>按鈕文本</ku-button>
定義了@click事件，當(dāng)點(diǎn)擊組件時(shí)會(huì)觸發(fā)$emit

步驟 3: 寫(xiě)一個(gè)Install方法

文章前面提到了Vue.use()方法，調(diào)用時(shí)它將會(huì)執(zhí)行install方法，這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。

下面，我們?cè)趕rc中創(chuàng)建一個(gè)index.js文件，然后再里面寫(xiě)：

import KuButton from "./KuButton.vue"

export default {
 install(Vue, options) {
  // 注冊(cè)全局組件
  // https://cn.vuejs.org/v2/guide/components-registration.html
  Vue.component("ku-button", KuButton)
 }
}

到這里，一個(gè)完整的插件就差不多啦！ 👏

步驟 4: 完善根目錄的package.json文件

打開(kāi)剛剛npm init創(chuàng)建的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"
 }
}

說(shuō)明：

private屬性為false時(shí)代表你的包不是私有的，所有人都能查看并npm install使用
name屬性指后續(xù)發(fā)布在npm時(shí)的包名，請(qǐng)確保你的包名未被注冊(cè)
version屬性指包的版本號(hào)，在你每次發(fā)布更新到npm時(shí)，都需要增加版本號(hào)。你可以查看更多語(yǔ)義化版本號(hào)的知識(shí)
description屬性指包的描述信息，寫(xiě)上去好讓大家知道你這個(gè)包是干嘛用的
main屬性指定了包加載的入口文件，require('moduleName')就會(huì)加載這個(gè)文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js。
scripts屬性指定了運(yùn)行腳本命令的npm命令行縮寫(xiě)，比如build指定了運(yùn)行npm run build時(shí)，所要執(zhí)行的命令。
files屬性可以指定哪些文件需要被發(fā)布到npm上，比如這里指定了dist文件夾里的所有文件

你可以在npm官方文檔查看更多關(guān)于package.json的知識(shí)

打包

打包工具這里我使用的是Bili，一個(gè)強(qiáng)大的速度快，零配置的打包工具。

開(kāi)始安裝打包工具：

$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler

然后在項(xiàng)目根目錄下創(chuàng)建一個(gè)bili.config.js配置文件，配置如下：

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

完成后，你只需要執(zhí)行一個(gè)命令就打包完成，就這么簡(jiǎn)單：

$ bili

打包成功后，在項(xiàng)目根目錄下會(huì)生成一個(gè)dist文件夾，里面有個(gè)index.umd.js文件

在npm上分享你的成果

到這里，你的vue插件就開(kāi)發(fā)完成了。剩下最后一步，就是在npmjs上發(fā)布你的插件！
但前提是你需要有一個(gè)npmjs賬號(hào)，如果沒(méi)有的話(huà)需要去注冊(cè)一個(gè)，有的話(huà)可以跳過(guò)這一步。

打開(kāi)終端，輸入：

$ npm login 
// 回車(chē)后，輸入你注冊(cè)npmjs時(shí)填寫(xiě)的用戶(hù)名，密碼和郵箱
// 登錄成功后，會(huì)提示：Logged in as <username> on https://registry.npmjs.org/.

查看當(dāng)前npm用戶(hù)登錄情況:

$ npm whoami
// 如果登錄成功，輸出的是登錄的用戶(hù)名

檢查以上步驟都沒(méi)問(wèn)題后，進(jìn)入剛剛完成的ku-button項(xiàng)目目錄，開(kāi)始發(fā)布：

$ npm publish

執(zhí)行成功后，你的插件就正式發(fā)布成功了??！🎉

后續(xù)如果要更新插件，只需要增加package.json里的version版本號(hào)，然后再次執(zhí)行npm publish發(fā)布更新就可以了！

項(xiàng)目中使用剛發(fā)布的插件

你可以像安裝其他插件一樣：

$ npm install --save ku-button

或者

$ yarn add ku-button

接著，在main.js引用：

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

Vue.use(KuButton)

最后，在你的頁(yè)面中這樣：

<ku-button round type="success" size="small">真酷！!</ku-button>

附上 Github地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具