在本文中，我们将通过考虑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集成到我们网站并开始接收付款的简单方法：data(){return{scriptLoaded:false,}},created(){this.loadScript()},methods:{asyncloadScript():Promise{constscriptPromise=newPromise((resolve)=>{constscript:any=document.createElement("script")script.defer=truescript.src="https://js.paystack.co/v1/inline.js"//添加脚本到文档头document.getElementsByTagName("head")[0].appendChild(script)if(script.readyState){//IE支持script.onreadystatechange=()=>{if(script.readyState==="complete"){script.onreadystatechange=nullresolve(true)}}else{//其他script.onload=()=>{resolve(true)}}})this.脚本加载=等待scriptPromise},payWithPaystack():void{if(this.scriptLoaded){constpaystackOptions={key:this.paystackKey,email:this.email,firstname:this.firstname,lastname:this.lastname,channels:this.channels，金额：this.amount，ref：this.reference，回调：（响应：任何）=>{this.callback（response）}，onClose：（）=>{this.close（）}，元数据：this.metadata,currency:this.currency,plan:this.plan,quantity:this.quantity,subaccount:this.subaccount,split_code:this.splitCode,transaction_charge:this.transactionCharge,bearer:this.bearer,}constwindowEl:any=窗口consthandler=windowEl.PaystackPop.setup(paystackOptions)handler.openIframe()}},},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:"继续付款")}returnh("button",{class:["paystack-button"],style:[{display:"block"}],type:"button",onClick:this.payWithPaystack,},this.$slots.default?this.$slots.default():"PROCEEDTOPAYMENT")}render函数帮助我们创建组件，并返回一个虚拟DOM节点。如果您注意到了，我们在条件语句中使用VueDemi的API之一isVue2来有条件地呈现我们的按钮。如果没有这个，如果我们想在Vue2应用程序中使用我们的组件库，我们可能会遇到错误，因为Vue2不支持Vue3的某些API。现在，当我们构建我们的库时，它可以在Vue2和Vue3中访问.完整的源代码可以在这里找到：https://github.com/ECJ222/vue-paystack2
