vue-demi 让你的组件库、工具包同时兼容vue2 & 3

前言

vue3发布也有很长一段时间了，不管是官方还是社区，目前已经有很多开源项目提供了对vue3的支持，完全能满足正常项目的开发，但同时官方也宣布放弃了对IE11及以下等低版本浏览器的支持。

对于想要兼容低版本浏览器的开发者来说，目前还是只能选择使用vue2，那么有什么方法既能体验vue3组合式Api语法，又能兼容低版本浏览器的方法呢？首先给出答案：有

下面首先先介绍下vue各版本如何使用最新的组合式Api语法进行开发

vue2+、vue2.7、vue3+

官方为vue2.6及以下版本提供了 @vue/composition-api，同时在去年发布了vue2.7，所以想要使用组合式Api有以下几种方式：

• vue2.6及以下 + @vue/composition-api
• vue2.7
• vue3+

第一种方式：笔者目前没有尝试过

第二种方式：前几个星期笔者刚好将vue2.6+的项目升级到vue2.7，使用上几乎和vue3一模一样

第三种方式：笔者目前所有的组件库、工具包、基础框架都是基于vue3开发

所以至此，在开发体验上vue2也能使用vue3的CompositionApi语法，同时vue3也保留着vue2的OptionApi的语法，所以对于想要完全或部分迁移项目的同学，真的是非常容易，大大减少了学习成本。

vue-demi

而对于开发工具包或组件库来说，如何能让其同时支持vue2 & 3呢？经过研究，官方提供了 vue-demi 的包，就是为了解决vue2 & 3之间的兼容性。包括著名的 vueuse，就是用它来开发的。

安装

yarn add vue-demi

修改包中的package.json配置

{
    "dependencies": { 
        "vue-demi": "latest"
    }, 
    "peerDependencies": { 
        "@vue/composition-api": "^1.0.0-rc.1",
        "vue": "^2.0.0 || >=3.0.0"
    },
    "peerDependenciesMeta": { 
        "@vue/composition-api": { "optional": true } 
    }, 
    "devDependencies": { 
        "vue": "^3.0.0" // 主要用于验证的 Vue 本地版本 
    }
}

使用

需要将原来从 vue 中导出的Api，全部换成从 vue-demi 中导出，即可

import { ref, reactive, defineComponent } from "vue-demi";

vite配置

如果是使用vite进行打包构建，则需要添加如下配置

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['vue-demi']
 }
})

最后

有了以上官方提供的工具，只需要前期配置好，vue2和vue3之间几乎没有技术壁垒，一套代码拉通，对于想要尝试的同学可以自行去试试。

github: github.com/guccihuiyua…

gitee: gitee.com/guccihuiyua…