您好,登錄后才能下訂單哦!
本文我們將學(xué)習(xí)如何制作一個(gè)vue插件,并將其分發(fā)到npm上,能夠讓其他人安裝使用.
插件大大地提高了開發(fā)者的開發(fā)效率。我們的大多數(shù)項(xiàng)目都依賴于它們,因?yàn)樗鼈兡軌蛞詷O快的速度發(fā)布新功能。
正如官方Vue.js文檔中所述,插件的范圍沒有限制。通常我們想實(shí)現(xiàn)的功能有下面5種:
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í),想對(duì)插件做一些自定義配置,你可以這么做:
Vue.use(MyPlugin, { option1: false, option2: true })
舉個(gè)例子,比如在引入熱門的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)入正題!開始構(gòu)建你的第一個(gè)vue插件💪
來(lái)制作一個(gè)酷炫的按鈕組件
作為一個(gè)有追求的前端,相信你們?cè)诠鹃_發(fā)項(xiàng)目時(shí),肯定會(huì)想過,"要是公司有屬于自己的一套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ì)提示一些問題,一直回車就行,然后最后會(huì)創(chuàng)建一個(gè)package.json文件
然后在項(xiàng)目根目錄中創(chuàng)建一個(gè)src文件夾,里面新建一個(gè)KuButton.vue組件,這里你甚至可以通過vue的vue serve和vue build命令行來(lái)對(duì)單個(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按鈕組件的代碼,讓它跑起來(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)很重要:
步驟 3: 寫一個(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文件,然后再里面寫:
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文件
打開剛剛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" } }
說明:
你可以在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è)命令就打包完成,就這么簡(jiǎn)單:
$ bili
打包成功后,在項(xiàng)目根目錄下會(huì)生成一個(gè)dist文件夾,里面有個(gè)index.umd.js文件
在npm上分享你的成果
到這里,你的vue插件就開發(fā)完成了。剩下最后一步,就是在npmjs上發(fā)布你的插件!
但前提是你需要有一個(gè)npmjs賬號(hào),如果沒有的話需要去注冊(cè)一個(gè),有的話可以跳過這一步。
打開終端,輸入:
$ npm login // 回車后,輸入你注冊(cè)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)
最后,在你的頁(yè)面中這樣:
<ku-button round type="success" size="small">真酷!!</ku-button>
附上 Github地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。