我要做开源第二季20230414期：OpenTiny 初体验你好，我是 Kagol，个人公众号：前端开源星球。本文主要带

你好，我是 Kagol，个人公众号：前端开源星球。

我要做开源第一季给大家分享了如何快速了解一个开源项目，从而决定自己是否参与其中。

我要做开源第一季20210918期：提交我的第一次 PR

除了看文档之外，最重要的就是亲自用一用这个开源项目。

在 Vue2 和 Vue3 项目中都可以使用 OpenTiny

我们了解到 OpenTiny 支持一套代码同时支持 Vue2 和 Vue3。

这到底意味着什么呢？亲自使用下就知道啦。

我们先用 Vue CLI 工具创建一个 Vue2 项目，然后安装 @opentiny/vue@2，在其中的 App.vue 文件中引入和使用 OpenTiny 的组件。

vue create vue2-demo

npm i @opentiny/vue@2

import { Button } from '@opentiny/vue'

<tiny-button>OpenTiny</tiny-button>

接着我们再用 Vite 创建一个 Vue3 的工程，安装 @opentiny/vue@3，同样在App.vue 文件中引入和使用 OpenTiny 的组件。

npm create vite

npm i @opentiny/vue@3

import { Button as TinyButton } from '@opentiny/vue'

<tiny-button>OpenTiny</tiny-button>

可以看到组件的使用方式是完全一样的，只需要改个 @opentiny/vue 依赖包的版本号。

这意味着什么呢？

假如我们有一个 Vue2 的项目，使用了 OpenTiny 组件库，而 Vue2 即将在年底不再维护，这时我们势必要升级 Vue3，升级完 Vue3，使用组件的那部分代码是不需要做任何改动的。

如果你之前的 Vue2 项目用的不是 OpenTiny，而是 ElementUI，情况会是怎样的呢？你除了需要将 Vue2 项目升级为 Vue3，还需要将使用 ElementUI 组件库的地方改成 Element Plus 组件库，由于仅支持 Vue2 的 ElementUI 几乎不怎么维护了，而支持 Vue3 的 Element Plus 则一直在持续更新，两边很有可能出现组件功能和 API 的不一致，这是将会造成很大的切换成本。

而 OpenTiny 由于是同一套代码，既支持 Vue2，也支持 Vue3，永远不存在组件功能和 API 不一致的情况，业务可以平滑切换。

参考：一个 OpenTiny，Vue2 Vue3 都支持！