前言

根據(jù) Vue 官網(wǎng)文檔的說(shuō)明，Vue2 的終止支持時(shí)間是 2023 年 12 月 31 日，這意味著從明年開(kāi)始：

• Vue2 將不再更新和升級(jí)新版本，不再增加新特性，不再修復(fù)缺陷

雖然 Vue3 正式版本已經(jīng)發(fā)布快3年了，但據(jù)我了解，現(xiàn)在依然還有很多業(yè)務(wù)在使用 Vue2，遲遲沒(méi)有升級(jí) Vue3。

為什么要等到 Vue2 徹底停止維護(hù)，才考慮升級(jí) Vue3 這個(gè)如此重要的問(wèn)題呢？？？

本文是一篇 Vue2 升級(jí) Vue3 的指南，主要包含以下部分：

1. 使用 Vue CLI 搭建 Vue2 工程

2. 使用 ElementUI 搭建表格、表單

3. 使用 OpenTiny Vue 替換一個(gè)組件

4. 使用 OpenTiny Vue 替換一個(gè)頁(yè)面

5. 使用 OpenTiny Vue 替換整個(gè)應(yīng)用

6. 使用 gogocode 升級(jí)到 Vue3，組件代碼無(wú)需修改

創(chuàng)建 Vue 2項(xiàng)目

先用 Vue CLI 創(chuàng)建一個(gè) Vue2 項(xiàng)目（也可以使用 Vite 配合??@vitejs/plugin-vue2?或?vite-plugin-vue2?插件）。

輸出以下信息說(shuō)明項(xiàng)目創(chuàng)建成功

創(chuàng)建好之后可以執(zhí)行以下命令啟動(dòng)項(xiàng)目

輸出以下命令說(shuō)明啟動(dòng)成功

效果如下

使用 ElementUI 搭建表格、表單

安裝 VueRouter

main.js

App.vue

安裝 ElementUI

在 src/views/FormPage.vue 中使用 ElementUI 組件，從 ElementUI 官網(wǎng)組件 demo 里面拷貝代碼即可。

典型表單：https://element.eleme.io/#/zh-CN/component/form#dian-xing-biao-dan

效果如下

表格頁(yè)面也一樣。

src/views/ListPage.vue

效果如下

首頁(yè)可以放一張輪播圖。

src/views/HomePage.vue

效果如下

參考：

• 表單：https://element.eleme.io/#/zh-CN/component/form

• 表格：https://element.eleme.io/#/zh-CN/component/table

• 輪播：https://element.eleme.io/#/zh-CN/component/carousel

****

使用 OpenTiny Vue 替換一個(gè)組件

OpenTiny Vue 的組件都是支持按需引入的，一開(kāi)始我們步子不要邁得太大，先嘗試替換一個(gè) Button 組件。

安裝??@opentiny/vue@2

表單頁(yè)面里面有兩個(gè)按鈕，我們嘗試將其替換成 OpenTiny Vue 的 Button 組件。

替換的步驟很簡(jiǎn)單，不需要修改現(xiàn)有的代碼，只需要增加4行代碼即可。

src/views/FormPage.vue

效果如下

使用 OpenTiny Vue 替換一個(gè)頁(yè)面

接下來(lái)我們步子逐漸邁大一點(diǎn)，將整個(gè) FormPage 頁(yè)面的 ElementUI 組件全部替換成 OpenTiny Vue 的組件。

FormPage 頁(yè)面一共有以下組件：

• Button

• Form

• FormItem

• Input

• Select

• Option

• Col

• DatePicker

• TimePicker

• Switch

• CheckboxGroup

• Checkbox

• RadioGroup

• Radio

替換的方式和前面替換 Button 組件一模一樣，只需要多加一些組件。

效果如下

使用 OpenTiny Vue 替換整體應(yīng)用

最后一步就是使用 OpenTiny Vue 替換整個(gè)應(yīng)用的 ElementUI。

我們可以用前面的方法進(jìn)行替換，但考慮到整個(gè)應(yīng)用的頁(yè)面眾多，我們采取另一種方式。

我們已經(jīng)全局注冊(cè)了 ElementUI 組件庫(kù)，接下來(lái)我們?nèi)肿?cè) OpenTiny Vue 組件庫(kù)。

然后全局替換?el-?為?tiny-，一步到位！

效果如下

首頁(yè)輪播

表單

表格

是不是非常絲滑，更絲滑的還在后面！

接下來(lái)我們將借助一款神器：gogocode，實(shí)現(xiàn) Vue2 項(xiàng)目平滑升級(jí) Vue3。

使用 gogocode 升級(jí)到 Vue3

安裝 gogocode：

轉(zhuǎn)換源碼：

升級(jí)依賴(lài)：

升級(jí) TinyVue 組件庫(kù)到 3.0 版本

組件代碼無(wú)需做任何修改，完成 Vue2 項(xiàng)目平滑升級(jí)到 Vue3 ??

執(zhí)行?npm run dev?命令啟動(dòng)項(xiàng)目，除了 Vue 版本號(hào)變化之后，其他任何效果都沒(méi)有變化。

首頁(yè)輪播

表單

表格

遇到的問(wèn)題

問(wèn)題一：error 'v-model' directives require no argument vue/no-v-model-argument

解決方法：修改 FormPage.vue 中的 v-model:value 為 v-model 即可

問(wèn)題二：Failed to resolve component: router-link

解決方案：修改 main.js 中 use(router) 代碼順序即可

如果你在升級(jí) Vue3 的過(guò)程中遇到任何問(wèn)題，歡迎在評(píng)論區(qū)進(jìn)行討論，也歡迎添加 OpenTiny 小助手?opentiny-official?與我們交流！

本文涉及到的源碼鏈接：

• https://github.com/opentiny/cross-framework-component

Element 升級(jí) OpenTiny 的 demo 項(xiàng)目在 packages/element-to-opentiny 子包里。

• vue2 項(xiàng)目在?vue2?分支

• vue3 項(xiàng)目在?vue3?分支

關(guān)于 OpenTiny

OpenTiny 是一套企業(yè)級(jí) Web 前端開(kāi)發(fā)解決方案，提供跨端、跨框架的UI組件庫(kù)，適配 PC 端 / 移動(dòng)端等多端，支持 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有靈活擴(kuò)展的低代碼引擎，包含主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等豐富的效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

• 跨端跨框架：?使用 Renderless 無(wú)渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開(kāi)發(fā)能力強(qiáng)。

• 組件豐富：PC 端有100+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見(jiàn)組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP 地址輸入框、Calendar 日歷、Crop 圖片裁切等。

• 低代碼引擎：低代碼引擎使能開(kāi)發(fā)者定制低代碼平臺(tái)。它是低代碼平臺(tái)的底座，提供可視化搭建頁(yè)面等基礎(chǔ)能力，既可以通過(guò)線(xiàn)上搭配組合，也可以通過(guò)下載源碼進(jìn)行二次開(kāi)發(fā)，實(shí)時(shí)定制出自己的低代碼平臺(tái)。適用于多場(chǎng)景的低代碼平臺(tái)開(kāi)發(fā)，如：資源編排、服務(wù)端渲染、模型驅(qū)動(dòng)、移動(dòng)端、大屏端、頁(yè)面編排等。

• 配置式組件：?組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化。

• 周邊生態(tài)齊全：?提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開(kāi)發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線(xiàn)主題配置平臺(tái) TinyTheme。

歡迎加入 OpenTiny 開(kāi)源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉(cāng)庫(kù)：https://github.com/opentiny/

TinyVue 源碼：?https://github.com/opentiny/tiny-vue

TinyEngine 源碼：?https://github.com/opentiny/tiny-engine

歡迎進(jìn)入代碼倉(cāng)庫(kù) Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉(cāng)庫(kù)，找到?good first issue標(biāo)簽，一起參與開(kāi)源貢獻(xiàn)~