在本文中，我们通过考虑VueDemi的作用、工作原理以及如何开始使用它来了解一下VueDemi。VueDemi是一个很棒的软件包，具有很大的潜力和实用性。我强烈建议在创建下一个Vue库时使用它。根据创建者AnthonyFu的说法，VueDemi是一个开发实用程序，它允许用户为Vue2和Vue3编写通用的Vue库，而不必担心用户安装了哪个版本。以前，要创建一个支持两个目标版本的Vue库，我们会使用不同的分支来分离对每个版本的支持。对于现有库来说，这是一种很好的方法，因为它们的代码库通常更稳定。缺点是你需要维护两个代码库，这会使你的工作量增加一倍。对于想要支持Vue的两个目标版本的新Vue库，我不推荐这种方法。两次实施功能请求和错误修复根本不理想。这就是VueDemi的用武之地。VueDemi通过为两个目标版本提供共同支持来解决这个问题，这意味着您只需构建一次并获得两个目标版本的所有好处，从而获得两全其美。在本文中，我们将了解VueDemi的功能、工作原理以及如何开始构建通用Vue组件库。VueDemi中的额外API除了Vue已经提供的API之外，VueDemi还引入了一些额外的API，以帮助区分用户的环境并执行特定于版本的逻辑。让我们仔细看看它们！请注意，VueDemi还包括Vue中已经存在的标准API，例如ref、onMounted和onUnmounted等。isVue2和isVue3在VueDemi中，isvue2和isvue3API允许用户在创建Vue库时应用特定于版本的逻辑。例如：import{isVue2,isVue3}from'vue-demi'if(isVue2){//Vue2only}else{//Vue3only}vue2VueDemi提供了vue2API，允许用户访问全局APIVue2，像这样：import{Vue2}from'vue-demi'//在Vue3中，`Vue2`将返回undefinedif(Vue2){Vue2.config.devtools=true}install()在Vue2中，CompositionAPI作为提供的插件工作，需要在使用前安装在Vue实例上：但是对于你想确定插件是否正确安装，提供了install()API来帮助你。它作为Vue.use(VueCompositionAPI)的安全版本公开：import{install}from'vue-demi'install()VueDemi入门要开始使用VueDemi，您需要将它安装到您的应用程序中。在本文中，我们将创建一个与Paystack支付网关集成的Vue组件库。您可以像这样安装VueDemi：//Npmnpmivue-demi//Yarnyarnaddvue-demi您还需要添加vue和@vue/composition-api作为库的对等依赖项以指定它应该支持的内容版本。现在我们可以将VueDemi导入到我们的应用程序中：如此处所示，我们可以使用现有的标准VueAPI，例如defineComponent、PropType和h。现在我们已经导入了VueDemi，让我们添加我们的道具。这些是用户在使用组件库时需要（或不需要，取决于您的喜好）传入的属性。上面看到的属性是使用Paystack的PopupJS所必需的。PopupJS提供了一种将Paystack集合到我们的网站并开始接收付款的简单方法：scriptLoaded状态帮助我们知道是否添加了PaystackPopupJS脚本，loadScript方法加载PaystackPopupJS脚本并添加在我们文档的开头，payWithPaystack方法用于在调用时使用PaystackPopupJS初始化交易：render(){if(isVue2){returnh("button",{staticClass:["paystack-button"],style:[{display:"block"}],attrs:{type:"button"},on:{click:this.payWithPaystack},},this.$slots.default?this.$slots.default:"PROCEEDTOPAYMENT")}returnh("button",{class:["paystack-button"],style:[{display:"block"}],type:"button",onClick:this.payWithPaystack,},这个。$slots.default?this.$slots.default():"PROCEEDTOPAYMENT")}render函数帮助我们创建一个没有标签的组件并返回一个虚拟DOM节点。如果您注意到了，我们在条件语句中使用VueDemi的API之一isVue2来有条件地呈现我们的按钮。如果没有这个，如果我们想在Vue2应用程序中使用我们的组件库，我们可能会遇到错误，因为Vue2不支持Vue3的某些API。现在，当我们构建我们的库时，它可以在Vue2和Vue3中访问.完整源码在这里：https://github.com/ECJ222/vue-paystack2原文：https://blog.logrocket.com/build-universal-vue-component-library-vue-demi/作者：EnochChejieh本文转载自微信公众号“前端全栈开发者”，可关注下方二维码。转载本文请联系前端全栈开发公众号。
