ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

2022-07-25 23:33:57  阅读:121  来源: 互联网

标签:vue vue2 Demi Vue https vue3 demi


如果你的vue2代码之前是使用vue-class-component 类组件模式写的。选择可以使用 https://github.com/facing-dev/vue-facing-decorator 来进行低成本的升级,但是升级难度还是蛮大的。

如果你之前的vue2 版本使用的是 @vue/composition-api,那么 Vue Demi  以后可以无缝升级vue3.

 

Vue Demi 是一个很棒的包,具有很多潜力和实用性。

根据创建者 Anthony Fu 的说法

Vue Demi 是一个开发实用程序,允许你为 Vue 2 和 3 编写通用 Vue 库。而无需担心用户安装的版本

作者Antfu的介绍博客: https://antfu.me/posts/make-libraries-working-with-vue-2-and-3

vue-demi库:https://github.com/vueuse/vue-demi

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

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

 

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

  • 通用Vue库。意味着这大多数情况下不是业务开发者会直接使用到的库,主要面向库开发者(vue组件库/vue插件 等)

  • 开发工具。供库开发者使用的工具,也就是说业务开发者不实际感知到它;

Vue Demi 扮演的角色

 

 

在 Vue 2 中,Composition API 作为插件提供,在使用它之前需要安装在 Vue 实例上:

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

Vue.use(VueCompositionAPI)

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

Vue Demi使用了NPM钩子postinstall。当用户安装所有包后,脚本将开始检查已安装的Vue版本,并根据Vue版本返回对应的代码。在使用Vue 2时,如果没有安装@vue/composition-api,它也会自动安装.

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

import { install } from 'vue-demi' 

install()

在实际的代码中,直接用就好

当你使用vue Api时,请从vue-demi里导入,它会自动根据用户使用的环境,而被重定向到vue@3.x或者vue@2.x + @vue/composition-api

当用户要创建一个Vue插件/库时,只需将vue-demi安装为依赖项并将其导入,然后像之前一样发布你的插件/库,用户的软件包就会变得通用。

import {defineComponent, PropType, h, isVue2} from "vue-demi" 
export default defineComponent({
  // ... 
})

但是还是的修改你package 代码:

{
  "peerDependencies": {
    "@vue/composition-api": "^1.4.3",
    "vue": "^2.6.12 || >=3.2.37"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  }
}

 

 

参考文章:

使用 Vue Demi 构建通用的 Vue 组件库 https://developer.51cto.com/article/700797.html

一库】vue-demi: 一拳打穿vue2和3的版本次元壁 https://juejin.cn/post/7032860019880099847

Vue Demi https://madewith.cn/502

 

 


转载本站文章《vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8866.html

标签:vue,vue2,Demi,Vue,https,vue3,demi
来源: https://www.cnblogs.com/zhoulujun/p/16519276.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有