前端升级方案

1 原有架构升级开发

从vue2升级到vue3，写法兼容，但是核心升级就意味着几乎所有与之相关的依赖都需要更新升级，且部分依赖并没有vue3版本，需要另寻替代品。

语言从JavaScript升级TypeScript，可以兼容，但是不使用新特性等于没升级。

打包工具从vuecli（webpack）升级到vite，配置需要重写。

2 重构架构开发

1 从零开始

根据官方文档从头开始构建，使用官方脚手架工具选择所需功能进行构建。

npm create vue@latest

从零构建一个带有typescript、vue3、vite、pinia（vuex）、router、vitest、eslint、prettier等基础依赖的空项目，在此基础上进行重构开发。

目前生成的依赖技术选型

"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5"

"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2",
"@types/jsdom": "^21.1.6",
"@types/node": "^18.19.3",
"@vitejs/plugin-vue": "^4.5.2",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.4.3",
"@vue/tsconfig": "^0.5.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"jsdom": "^23.0.1",
"npm-run-all2": "^6.1.1",
"prettier": "^3.0.3",
"typescript": "~5.3.0",
"vite": "^5.0.10",
"vitest": "^1.0.4",
"vue-tsc": "^1.8.25"

2 vue-element-plus-admin

预览链接：https://element-plus-admin.cn/

1.9kstar

官网描述如下：

vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的 Vue3，Vite，Typescript等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。

vue-element-plus-admin 的定位是后台集成方案，因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

如需要基础模版，请切换到 mini 分支，mini 只简单集成了一些如：布局、动态菜单等常用布局功能，更适合开发者进行二次开发。

技术栈如下：

Vue3
Pinia
TypeScript
Vue-router
Element-plus
Es6
Vitejs
unocss
Axios

该方案的优势在于技术栈较为熟悉，学习成本较低，开源免费

该方案的缺点在于设计风格较为简约，注重易用性，同时组件方面较为基础，适合快速构建。

最新版本2.5.4于十二月二十六号更新

许可证为MIT

3 vue-vben-admin

预览链接：https://vben.vvbin.cn/

20.9kstar

官网描述如下：

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

技术栈如下：

Vue3 文档
Vue-RFCS
Vue2 迁移到 3
TypeScript
Vue-router
Ant-Design-Vue
Es6
Vitejs
WindiCss

该方案的优势在于扁平化设计，注重美感与统一性，组件较为复杂，提供付费组件，适合复杂构建。

该方案的缺点在于没有前一个方案的熟悉程度高，主要组件库使用的是Ant-Design-Vue，在需要将现有两套组件库（elemenUI和iviewdesign）的情况下合二为一并且更换为另外一个组件库学习成本较高。

最新版本2.10.1于九月二十七号更新

许可证为MIT

4 naive-ui-admin

预览链接：https://jekip.github.io/

4.3kstar

官网描述如下：

Naive Ui Admin 完全免费，且可商用，基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目， 相信不管是从新技术使用还是其他方面，都能帮助到你。

技术栈如下：

Vite
Vue3
TypeScript
Es6+
Vue-Router-Next
Naive-ui-admin
Mock.js

该方案的优势在于简单清晰的UI库，注重易用与一致性，最大的好处是TypeScript写的，可以无缝衔接ts项目，且不需要导入css就可以让组件工作。

该方案的缺点和上一个一样，在于熟悉程度不高，主要组件库使用的是NaiveUI，在需要将现有两套组件库（elemenUI和iviewdesign）的情况下合二为一并且更换为另外一个组件库学习成本较高。且相较于前两个方案，该方案使用的组件库较为小众社区规模较小，因此社区支持不如前两个。但是该项目有一个付费版本，支持element plus

最新版本1.9.0于八月十号更新

许可证为MIT

5 vue-pure-admin

预览链接：https://yiming_chang.gitee.io/vue-pure-admin/#/login

11.6kstar

官网简介如下：

vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发

技术栈如下：

Vue3
Vite
Element-Plus
TypeScript
Pinia
Tailwindcss

该方案和vue-element-plus-admin方案大差不差，主要区别在于css库不同，该方案的css库使用的是更为知名的tailwindcss方案而非较为小众的unocss方案，社区支持的程度更高，出问题更容易找到解决方案。

最新版本4.5.0更新于六月二十六号，新版本将于24年上半年发布

许可证为MIT

6 iview-admin-plus

预览链接：https://adminplus.iviewui.com/dashboard/console

付费

官网简介如下：

Admin Plus 是一套企业级的通用型中后台前端解决方案，它基于 View UI Plus，适用于 Vue.js 3。
Admin Plus 使用最前沿的前端技术栈，支持各类型产品，比如典型的中后台应用（类阿里云后台、七牛云后台，各类 to B 产品）、社区型应用（类知乎、论坛、门户）（需使用社交布局。查看社交布局）、地图型应用（需使用地图布局。查看地图布局）、工作桌面型应用（需使用工作桌面布局。查看工作桌面布局）等

未找到其详细的技术栈列表。

该方案的优点在于其所使用的UI库为View UI Plus，是我们当前使用的iviewUI的vue3升级版本，学习成本较低。

该方案缺点在于

• 不清楚授权协议，从购买页面来看授权的版本还有所不同。
• 不清楚所用技术，详细文档需要付费授权阅读。
• 不清楚更新频率，官网的更新日志止步于2022年六月底

7 naive-admin

预览链接：https://plus.naiveadmin.com/login?redirect=/dashboard

付费

官网简介：

最新技术栈，使用 Vue3、Typescript、Pinia、Vite 等前端前沿技术
丰富的鉴权系统，对路由、菜单、功能点等支持 三种鉴权模式 满足不同的业务鉴权需求
导航栏模式、支持、左侧菜单，顶部菜单，顶部/左侧菜单混合模式 （应对菜单较多场景）
导航风格，支持三种、暗色侧边栏，纯白色，暗色顶栏/侧边栏 （风格随意搭配）
多页签功能 （深度增强，页面操作多页签，快捷操作，等实用性功能）
内置24种主题色，在线切换，颜色控看了也说好
支持页面搜索，再多菜单/页面，都也不怕，快捷一键触达
框架布局，均采用 flex布局 最大程度支持响应式
支持深色、浅色主题无缝切换 （科技感塑造其实也很简单）
通用性页面模板，可随意搭配组合，轻松构建出自己的业务系统 （不会css也没有太大关系）

技术栈如下：

（原文此处为截图，已移除）

该方案是前边naive-ui-admin方案的付费版本，Pro版本可在四个UI库（NaiveUI，Ant Design vue，ElementPlus，Arco Design）中任选其一。

该方案的优点是技术栈差不多，可以选用熟悉的Element，学习成本较低。

该方案的缺点是如图三所示没有移动端适配。文档需要付费后查看。只有一年更新权。

最新版本1.2.2发布于十月七号

授权协议

不可用于开源项目
不可用于类似产品和存在竞争性质的项目中
购买者禁止上传、分享产品源代码、二次转售等
虚拟物品下单后不支持退货退款
如无法遵守以上约定，请勿下单
以上违者必追究法律责任