vue

您所在的位置：网站首页 › 前端如何引入字体 › vue

vue

2023-05-03 05:25| 来源: 网络整理| 查看: 265

前言

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…

【本文地址】

vue

vue

今日新闻

推荐新闻