vue-loading外掛開發+npm部署

liu6發表於2020-04-06
VueNPM

簡介

作為一個開發萌新，一直秉承著輪子的搬運工，時而感嘆著搬運真爽原則，哈哈哈哈，見笑了各位。但是，摸著良心說，我內心對那些開發外掛的大牛，有著一顆赤誠的敬畏之心。很羨慕他們有能力能造福大家，省去了大部分開發的時間。

所以我決定也要學習著開發一個屬於自己的外掛，並且釋出到npm可以造福大家哈哈哈哈哈，雖然我是個萌新，但是我會努力的。

目錄

  • 外掛功能概述
  • 部署準備工作
  • 部署專案
  • 驗證
  • 總結

外掛功能概述

功能 ：實現一個loading載入功能。同時使用者可以自定義樣式大小以及文字。

介紹：此版本為第一個版本，而且主要以釋出流程流程為主。所以只封裝了三個loading元件。在以後的版本中，會增加許多種類。大家有什麼好的建議也可以提供給我，讓我多多改進。

元件1：環形loading

  <ys-load-ring text='loading':isShow='true'></ys-load-ring>
複製程式碼

引數 ：

引數 描述 型別
background 背景顏色 String
radius 圓圈的半徑 String
color 文字顏色 String
isShow 顯示與隱藏 Boolean
text 文字內容 String

展示：

vue-loading外掛開發+npm部署
元件2：條紋載入

<ys-load-wave :isShow='true'></ys-load-wave>
複製程式碼
引數 描述 型別
isShow 顯示與隱藏 Boolean

vue-loading外掛開發+npm部署
元件3：閃爍小球載入

 <ys-load-bobble :isShow='true'
複製程式碼
引數 描述 型別
isShow 顯示與隱藏 Boolean
radius 圓圈的半徑 String

vue-loading外掛開發+npm部署
小結：再檢查元件功能無誤的話，我們就可以進行部署操作了。

部署準備工作

a.理解vue外掛工作原理

我們都知道外掛是通過Vue.use()引入的，那麼其工作原理到底是什麼呢？先了解一下這個api.
引數：

{Object | Function} plugin

用法：

安裝 Vue.js 外掛。如果外掛是一個物件，必須提供 install 方法。如果外掛是一個函式，它會被作為 install 方法。install 方法呼叫時，會將 Vue 作為引數傳入。

該方法需要在呼叫 new Vue() 之前被呼叫。

當 install 方法被同一個外掛多次呼叫，外掛將只會被安裝一次。

b.編寫install方法：

思路：我們知道會執行install函式，所以在install函式裡，我們就開始全域性註冊元件，並且install函式第一引數預設是Vue:

import YsLoadRing from './YSLoadRing'
import YsLoadBobble from './YSLoadBobble'
import YsLoadWave from './YSLoadWave'
import Vue from 'vue'

const components = {
  YsLoadRing,
  YsLoadBobble,
  YsLoadWave

}
function install () {
  Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
  })
}
export default { install }
複製程式碼

匯入所有元件，在install函式裡進行全域性註冊，然後在把這個函式匯出。所以，這個檔案便是外掛的入口檔案。

c.配置package.json檔案

{
  "name": "load-vue",   //專案名稱
  "version": "0.0.1",   //版本號 每次釋出必須要不一樣哦
  "private": false,     //是否隱私
  "main": "./src/components/Load/index.js",     //入口檔案一定要是剛剛寫的那個Js檔案
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.3.0",
    "@vue/cli-plugin-eslint": "^4.3.0",
    "@vue/cli-plugin-router": "^4.3.0",
    "@vue/cli-service": "^4.3.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

複製程式碼

d.註冊一個npm賬號

直接進入官網註冊，傻瓜式流程。

部署專案：

預設上面的步驟都是一步一步走完的，好了開啟命名行：

a.輸入npm login 進行npm登入,輸入註冊的賬號密碼郵箱

vue-loading外掛開發+npm部署

b.輸入npm whoami 如果登陸成功 就會顯示你的使用者名稱

vue-loading外掛開發+npm部署

c.最後一步上傳檔案 npm publish

vue-loading外掛開發+npm部署
如果出現這個頁面，就說明上傳成功了。哈哈哈哈如果你能出現的話？其中也有幾個坑點：

d1:在註冊時，要進行郵箱驗證，手機點開是無效的，必須用電腦用電腦用電腦點開！！！否則就會這個錯誤：

vue-loading外掛開發+npm部署

d2:當遇到這個錯誤時：

vue-loading外掛開發+npm部署
我們需要這樣做：
vue-loading外掛開發+npm部署

d3:需要將淘寶源換成npm源。

vue-loading外掛開發+npm部署

驗證：

當完成釋出後，我們進入npm主頁就會這樣子：

vue-loading外掛開發+npm部署
到這裡，我們還需要驗證一下，從另外一專案引入自己發的外掛（不要從剛剛那個專案引入），看看能不能成功。當然我是沒有遇到問題，所以還是驗證一下為好的。

總結：

終於終於，有了自己的外掛，要細心呵護，茁壯成長。接下來，就是準備做一個官網，來介紹自己了。待它成為參天大樹，哈哈哈哈，我早已禿頭了。。。。。
理解元件化思想，理解元件化開發。就像現在經濟全球化一樣哈哈哈哈哈。
一入前端深似海啊，不焦躁，一步一步來。

相關文章