建站
咨詢
售后
建站咨詢
新聞中心
Vue Demi 是一個(gè)很棒的包，具有很多潛力和實(shí)用性。我強(qiáng)烈建議在創(chuàng)建下一個(gè) Vue 庫(kù)時(shí)使用它。
堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都玻璃貼膜小微創(chuàng)業(yè)公司專業(yè)提供成都定制網(wǎng)站營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
根據(jù)創(chuàng)建者 Anthony Fu 的說(shuō)法，Vue Demi 是一個(gè)開(kāi)發(fā)實(shí)用程序，它允許用戶為 Vue 2 和 Vue 3 編寫通用的 Vue 庫(kù)，而無(wú)需擔(dān)心用戶安裝的版本。
以前，要?jiǎng)?chuàng)建支持兩個(gè)目標(biāo)版本的 Vue 庫(kù)，我們會(huì)使用不同的分支來(lái)分離對(duì)每個(gè)版本的支持。對(duì)于現(xiàn)有庫(kù)來(lái)說(shuō)，這是一個(gè)很好的方法，因?yàn)樗鼈兊拇a庫(kù)通常更穩(wěn)定。
缺點(diǎn)是，你需要維護(hù)兩個(gè)代碼庫(kù)，這讓你的工作量翻倍。對(duì)于想要支持Vue的兩個(gè)目標(biāo)版本的新Vue庫(kù)來(lái)說(shuō)，我不推薦這種方法。實(shí)施兩次功能請(qǐng)求和錯(cuò)誤修復(fù)根本就不理想。
這就是 Vue Demi 的用武之地。Vue Demi 通過(guò)為兩個(gè)目標(biāo)版本提供通用支持來(lái)解決這個(gè)問(wèn)題，這意味著您只需構(gòu)建一次即可獲得兩個(gè)目標(biāo)版本的所有優(yōu)點(diǎn)，從而獲得兩全其美的優(yōu)勢(shì)。
在本文中，我們將了解 Vue Demi 是做什么的，它是如何工作的，以及如何開(kāi)始構(gòu)建一個(gè)通用的 Vue 組件庫(kù)。
Vue Demi 中的額外 API
除了 Vue 已經(jīng)提供的 API 之外，Vue Demi 還引入了一些額外的 API 來(lái)幫助區(qū)分用戶的環(huán)境和執(zhí)行特定于版本的邏輯。讓我們仔細(xì)看看它們!
請(qǐng)注意，Vue Demi 還包括 Vue 中已經(jīng)存在的標(biāo)準(zhǔn) API，例如 ref、onMounted 和 onUnmounted 等。
isVue2 and isVue3
在 Vue Demi 中，isvue2 和 isvue3 API 允許用戶在創(chuàng)建 Vue 庫(kù)時(shí)應(yīng)用特定于版本的邏輯。
例如：
import { isVue2, isVue3 } from 'vue-demi'
if (isVue2) {
// Vue 2 only
} else {
// Vue 3 only
}
vue2
Vue Demi 提供了 vue2 API，它允許用戶訪問(wèn) Vue 2 的全局 API，如下所示：
import { Vue2 } from 'vue-demi'
// in Vue 3 `Vue2` will return undefined
if (Vue2) {
Vue2.config.devtools = true
}
install()
在 Vue 2 中，Composition API 作為插件提供，在使用它之前需要安裝在 Vue 實(shí)例上：
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
Vue Demi 會(huì)嘗試自動(dòng)安裝它，但是對(duì)于您想要確保插件安裝正確的情況，提供了 install() API 來(lái)幫助您。
它作為 Vue.use(VueCompositionAPI) 的安全版本公開(kāi)：
import { install } from 'vue-demi'
install()
Vue Demi 入門
要開(kāi)始使用 Vue Demi，您需要將其安裝到您的應(yīng)用程序中。在本文中，我們將創(chuàng)建一個(gè)集成 Paystack 支付網(wǎng)關(guān)的 Vue 組件庫(kù)。
你可以像這樣安裝 Vue Demi：
// Npm
npm i vue-demi
// Yarn
yarn add vue-demi
您還需要添加 vue 和 @vue/composition-api 作為庫(kù)的對(duì)等依賴項(xiàng)，以指定它應(yīng)該支持的版本。
現(xiàn)在我們可以將 Vue Demi 導(dǎo)入我們的應(yīng)用程序：
如此處所示，我們可以使用已經(jīng)存在的標(biāo)準(zhǔn) Vue API，例如 defineComponent、PropType 和h。
現(xiàn)在我們已經(jīng)導(dǎo)入了Vue Demi，讓我們來(lái)添加我們的props。這些是用戶在使用組件庫(kù)時(shí)需要(或不需要，取決于你的口味)傳入的屬性。
上面看到的屬性是使用 Paystack 的 Popup JS 所必需的。
Popup JS 提供了一種將 Paystack 集成到我們的網(wǎng)站并開(kāi)始接收付款的簡(jiǎn)單方法：
scriptLoaded 狀態(tài)幫助我們知道是否添加了 Paystack Popup JS 腳本，并且 loadScript 方法加載 Paystack Popup JS 腳本并將其添加到我們的文檔頭部。
payWithPaystack 方法用于在調(diào)用時(shí)使用 Paystack Popup JS 初始化交易：
render() {
if (isVue2) {
return h(
"button",
{
staticClass: ["paystack-button"],
style: [{display: "block"}],
attrs: {type: "button"},
on: {click: this.payWithPaystack},
},
this.$slots.default ? this.$slots.default : "PROCEED TO PAYMENT"
)
}
return h(
"button",
{
class: ["paystack-button"],
style: [{display: "block"}],
type: "button",
onClick: this.payWithPaystack,
},
this.$slots.default ? this.$slots.default() : "PROCEED TO PAYMENT"
)
}
render 函數(shù)幫助我們創(chuàng)建沒(méi)有 標(biāo)簽的組件，并返回一個(gè)虛擬 DOM 節(jié)點(diǎn)。
如果你注意到，我們?cè)跅l件語(yǔ)句中使用了Vue Demi的一個(gè)API，isVue2，來(lái)有條件地渲染我們的按鈕。如果沒(méi)有這一點(diǎn)，如果我們想在Vue 2應(yīng)用程序中使用我們的組件庫(kù)，我們可能會(huì)因?yàn)閂ue 2不支持Vue 3的一些API而遇到錯(cuò)誤。
現(xiàn)在，當(dāng)我們構(gòu)建我們的庫(kù)時(shí)，它可以在 Vue 2 和 Vue 3 中訪問(wèn)。
完整的源代碼可在此處獲得：https://github.com/ECJ222/vue-paystack2
原文：https://blog.logrocket.com/build-universal-vue-component-library-vue-demi/
作者：Enoch Chejieh
本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開(kāi)發(fā)者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開(kāi)發(fā)者公眾號(hào)。
網(wǎng)站欄目：使用VueDemi構(gòu)建通用的Vue組件庫(kù)
轉(zhuǎn)載來(lái)源：http://fisionsoft.com.cn/article/cddosgs.html
