使用 Vue Demi 构建通用的 Vue 组件库

开发 前端
在本文中,我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi。Vue Demi 是一个很棒的包,具有很多潜力和实用性。我强烈建议在创建下一个 Vue 库时使用它。

在本文中,我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi。

Vue Demi 是一个很棒的包,具有很多潜力和实用性。我强烈建议在创建下一个 Vue 库时使用它。

根据创建者 Anthony Fu 的说法,Vue Demi 是一个开发实用程序,它允许用户为 Vue 2 和 Vue 3 编写通用的 Vue 库,而无需担心用户安装的版本。

以前,要创建支持两个目标版本的 Vue 库,我们会使用不同的分支来分离对每个版本的支持。对于现有库来说,这是一个很好的方法,因为它们的代码库通常更稳定。

缺点是,你需要维护两个代码库,这让你的工作量翻倍。对于想要支持Vue的两个目标版本的新Vue库来说,我不推荐这种方法。实施两次功能请求和错误修复根本就不理想。

这就是 Vue Demi 的用武之地。Vue Demi 通过为两个目标版本提供通用支持来解决这个问题,这意味着您只需构建一次即可获得两个目标版本的所有优点,从而获得两全其美的优势。

在本文中,我们将了解 Vue Demi 是做什么的,它是如何工作的,以及如何开始构建一个通用的 Vue 组件库。

Vue Demi 中的额外 API

除了 Vue 已经提供的 API 之外,Vue Demi 还引入了一些额外的 API 来帮助区分用户的环境和执行特定于版本的逻辑。让我们仔细看看它们!

请注意,Vue Demi 还包括 Vue 中已经存在的标准 API,例如 ref、onMounted 和 onUnmounted 等。

isVue2 and isVue3

在 Vue Demi 中,isvue2 和 isvue3 API 允许用户在创建 Vue 库时应用特定于版本的逻辑。

例如:

import { isVue2, isVue3 } from 'vue-demi' 
if (isVue2) {
// Vue 2 only
} else {
// Vue 3 only
}

vue2

Vue Demi 提供了 vue2 API,它允许用户访问 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 实例上:

import Vue from 'vue' 
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

Vue Demi 会尝试自动安装它,但是对于您想要确保插件安装正确的情况,提供了 install() API 来帮助您。

它作为 Vue.use(VueCompositionAPI) 的安全版本公开:

import { install } from 'vue-demi' 

install()

Vue Demi 入门

要开始使用 Vue Demi,您需要将其安装到您的应用程序中。在本文中,我们将创建一个集成 Paystack 支付网关的 Vue 组件库。

你可以像这样安装 Vue Demi:

// Npm 
npm i vue-demi

// Yarn
yarn add vue-demi

您还需要添加 vue 和 @vue/composition-api 作为库的对等依赖项,以指定它应该支持的版本。

现在我们可以将 Vue Demi 导入我们的应用程序:

<script lang="ts"> 
import {defineComponent, PropType, h, isVue2} from "vue-demi"

export default defineComponent({
// ...
})
</script>

如此处所示,我们可以使用已经存在的标准 Vue API,例如 defineComponent、PropType 和h。

现在我们已经导入了Vue Demi,让我们来添加我们的props。这些是用户在使用组件库时需要(或不需要,取决于你的口味)传入的属性。

上面看到的属性是使用 Paystack 的 Popup JS 所必需的。

Popup JS 提供了一种将 Paystack 集成到我们的网站并开始接收付款的简单方法:

<script lang="ts">
import {defineComponent, PropType, h, isVue2} from "vue-demi"
// Basically this tells the metadata prop what kind of data is should accept
interface MetaData {
[key: string]: any
}

export default defineComponent({
props: {
paystackKey: {
type: String as PropType<string>,
required: true,
},
email: {
type: String as PropType<string>,
required: true,
},
firstname: {
type: String as PropType<string>,
required: true,
},
lastname: {
type: String as PropType<string>,
required: true,
},
amount: {
type: Number as PropType<number>,
required: true,
},
reference: {
type: String as PropType<string>,
required: true,
},
channels: {
type: Array as PropType<string[]>,
default: () => ["card", "bank"],
},
callback: {
type: Function as PropType<(response: any) => void>,
required: true,
},
close: {
type: Function as PropType<() => void>,
required: true,
},
metadata: {
type: Object as PropType<MetaData>,
default: () => {},
},
currency: {
type: String as PropType<string>,
default: "",
},
plan: {
type: String as PropType<string>,
default: "",
},
quantity: {
type: String as PropType<string>,
default: "",
},
subaccount: {
type: String as PropType<string>,
default: "",
},
splitCode: {
type: String as PropType<string>,
default: "",
},
transactionCharge: {
type: Number as PropType<number>,
default: 0,
},
bearer: {
type: String as PropType<string>,
default: "",
},
}
</script>

scriptLoaded 状态帮助我们知道是否添加了 Paystack Popup JS 脚本,并且 loadScript 方法加载 Paystack Popup JS 脚本并将其添加到我们的文档头部。

payWithPaystack 方法用于在调用时使用 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 函数帮助我们创建没有 标签的组件,并返回一个虚拟 DOM 节点。

如果你注意到,我们在条件语句中使用了Vue Demi的一个API,isVue2,来有条件地渲染我们的按钮。如果没有这一点,如果我们想在Vue 2应用程序中使用我们的组件库,我们可能会因为Vue 2不支持Vue 3的一些API而遇到错误。

现在,当我们构建我们的库时,它可以在 Vue 2 和 Vue 3 中访问。

完整的源代码可在此处获得:https://github.com/ECJ222/vue-paystack2

原文:https://blog.logrocket.com/build-universal-vue-component-library-vue-demi/

作者:Enoch Chejieh

本文转载自微信公众号「前端全栈开发者」,可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。


责任编辑:武晓燕 来源: 前端全栈开发者
相关推荐

2022-09-20 12:21:25

Vue2Vue3$attrs

2020-02-21 11:08:24

浏览器HTML设计

2020-03-25 18:23:07

Vue2Vue3组件

2016-09-19 13:44:54

vue翻页组件Web

2022-03-29 12:01:57

Vue 组件js组件工具集

2021-08-01 07:58:58

Vue 加载组件

2023-03-29 08:52:58

视觉Vue组件库

2009-11-30 08:38:35

WinForm

2023-08-07 08:52:53

Vue组件Props 命名

2016-09-19 21:37:58

vue特效组件Web

2020-09-28 15:48:37

开源技术 软件

2018-01-31 15:45:07

前端Vue.js组件

2021-01-20 15:59:14

开发Vue组件库

2023-10-12 12:43:16

组件Vue

2021-04-23 09:40:17

Vue插件框架

2021-09-29 11:33:19

异步组件Vue 3

2022-08-09 11:46:58

Vue递归组件

2024-05-23 12:45:13

VueMacros语法

2017-07-25 08:54:26

前端JsxVue

2022-11-29 08:45:44

Vue 3UI 组件库
点赞
收藏

51CTO技术栈公众号