Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟
本文我們將學(xué)習(xí)如何制作一個(gè)vue插件，并將其分發(fā)到npm上，能夠讓其他人安裝使用.
插件大大地提高了開發(fā)者的開發(fā)效率。我們的大多數(shù)項(xiàng)目都依賴于它們，因?yàn)樗鼈兡軌蛞詷O快的速度發(fā)布新功能。
正如官方Vue.js文檔中所述，插件的范圍沒有限制。通常我們想實(shí)現(xiàn)的功能有下面5種:
- 添加全局方法或者屬性 (如: vue-custom-element)
- 添加全局資源：指令/過濾器/過渡等 (如：vue-touch)
- 通過全局 mixin 方法添加一些組件選項(xiàng) (如：vue-router)
- 添加 Vue 實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn) (如：vue-axios)
- 一個(gè)庫，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能（如：vue-router）
OK，現(xiàn)在你了解了vue插件是什么了，以及它可以滿足哪些需求！
如何在vue項(xiàng)目中使用插件
通過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方式引用的話，也可以通過以下方式引用：
<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>
另外，在你調(diào)用Vue.use()時(shí)，想對插件做一些自定義配置，你可以這么做：
Vue.use(MyPlugin, {
option1: false,
option2: true
})
舉個(gè)例子，比如在引入熱門的Element UI庫時(shí)，它支持傳入一個(gè)全局配置對象
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)入正題！開始構(gòu)建你的第一個(gè)vue插件💪
來制作一個(gè)酷炫的按鈕組件
作為一個(gè)有追求的前端，相信你們在公司開發(fā)項(xiàng)目時(shí)，肯定會(huì)想過，"要是公司有屬于自己的一套UI組件庫，那肯定很棒！"。
如果你有這個(gè)想法，那你認(rèn)真看完這篇文章后，將會(huì)給你帶來很多靈感和啟發(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ì)提示一些問題，一直回車就行，然后最后會(huì)創(chuàng)建一個(gè)package.json文件
然后在項(xiàng)目根目錄中創(chuàng)建一個(gè)src文件夾，里面新建一個(gè)KuButton.vue組件，這里你甚至可以通過vue的vue serve和vue build命令行來對單個(gè)*.vue文件進(jìn)行快速原型開發(fā)，不過前提需要先額外安裝一個(gè)全局的擴(kuò)展
$ npm install -g @vue/cli $ npm install -g @vue/cli-service-global
安裝完成后，當(dāng)你成功執(zhí)行以下命令行后：
$ vue serve KuButton.vue
就可以直接在瀏覽器訪問 http://localhost:8080/
更多關(guān)于vue快速原型開發(fā)的知識(shí)，你可以查看官方文檔
下面，我們開始完善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>
后續(xù)我們就可以像這樣使用:
<ku-button type="success" size="mini" round>小按鈕</ku-button>
雖然我將按鈕模板進(jìn)行了簡化，但這里有幾個(gè)學(xué)習(xí)點(diǎn)很重要：
- 使用了BEM規(guī)范。（更多關(guān)于BEM的知識(shí)，可查看這里）
- 通過props配置接收3個(gè)參數(shù)（按鈕類型，按鈕大小，按鈕是否為圓角），這樣方便使用者隨時(shí)切換不同主題的按鈕。
- 使用了slot插槽，這樣我們就可以這樣使用<ku-button>按鈕文本</ku-button>
- 定義了@click事件，當(dāng)點(diǎn)擊組件時(shí)會(huì)觸發(fā)$emit
步驟 3: 寫一個(gè)Install方法
文章前面提到了Vue.use()方法，調(diào)用時(shí)它將會(huì)執(zhí)行install方法，這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象。
下面，我們在src中創(chuàng)建一個(gè)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)
}
}
到這里，一個(gè)完整的插件就差不多啦！ 👏
步驟 4: 完善根目錄的package.json文件
打開剛剛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"
}
}
說明：
- private屬性為false時(shí)代表你的包不是私有的，所有人都能查看并npm install使用
- name屬性指后續(xù)發(fā)布在npm時(shí)的包名，請確保你的包名未被注冊
- version屬性指包的版本號(hào)，在你每次發(fā)布更新到npm時(shí)，都需要增加版本號(hào)。你可以查看更多語義化版本號(hào)的知識(shí)
- description屬性指包的描述信息，寫上去好讓大家知道你這個(gè)包是干嘛用的
- main屬性指定了包加載的入口文件，require('moduleName')就會(huì)加載這個(gè)文件。這個(gè)字段的默認(rèn)值是模塊根目錄下面的index.js。
- scripts屬性指定了運(yùn)行腳本命令的npm命令行縮寫，比如build指定了運(yùn)行npm run build時(shí)，所要執(zhí)行的命令。
- files屬性可以指定哪些文件需要被發(fā)布到npm上，比如這里指定了dist文件夾里的所有文件
你可以在npm官方文檔查看更多關(guān)于package.json的知識(shí)
打包
打包工具這里我使用的是Bili，一個(gè)強(qiáng)大的速度快，零配置的打包工具。
開始安裝打包工具：
$ 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è)命令就打包完成，就這么簡單：
$ bili
打包成功后，在項(xiàng)目根目錄下會(huì)生成一個(gè)dist文件夾，里面有個(gè)index.umd.js文件
在npm上分享你的成果
到這里，你的vue插件就開發(fā)完成了。剩下最后一步，就是在npmjs上發(fā)布你的插件！
但前提是你需要有一個(gè)npmjs賬號(hào)，如果沒有的話需要去注冊一個(gè)，有的話可以跳過這一步。
打開終端，輸入：
$ npm login // 回車后，輸入你注冊npmjs時(shí)填寫的用戶名，密碼和郵箱 // 登錄成功后，會(huì)提示：Logged in as <username> on https://registry.npmjs.org/.
查看當(dāng)前npm用戶登錄情況:
$ npm whoami // 如果登錄成功，輸出的是登錄的用戶名
檢查以上步驟都沒問題后，進(jìn)入剛剛完成的ku-button項(xiàng)目目錄，開始發(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)
最后，在你的頁面中這樣：
<ku-button round type="success" size="small">真酷！!</ku-button>
附上 Github地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在本篇文章里小編給大家整理了關(guān)于vue的for循環(huán)使用方法和步驟，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue3.x中useRouter()執(zhí)行后返回值是undefined問題解決
這篇文章主要給大家介紹了關(guān)于vue3.x中useRouter()執(zhí)行后返回值是undefined問題的解決方法,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3.x具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue中引入高德地圖并多點(diǎn)標(biāo)注的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue中引入高德地圖并多點(diǎn)標(biāo)注,實(shí)現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03