vue2升级3（vue2升级vite）



为保证vue2项目更高效地迁到vue3上，因此本次的升级，vue2的选项式API和js写法保持不变。只升级框架、组件和一系列插件，对升级的这部分与vue2原来项目不兼容的写法做出修改，来保证项目在vue3框架上正常运行。

由于Vue3 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。而Vue2是按照选项式 API 写法来写的。为了更快更准确的将vue2项目升级至vue3，因此在本次的升级中代码结构保持不变，后续新写的页面再可以采用组合式API的写法。

本次框架升级还加了typeScript，但由于之前vue2项目还是用js写的，因此这一部分也保持不变，后续新写的页面再可以用ts。

于是乎：

本次升级的目的就是为了将原来的vue2+webpack+element-ui升级替换为vue3+vite+element-plus+ts，做整体框架的升级优化，然后项目可以正常跑起来，不报错。

了解完之后就开始干吧~~~

关于node升级，大家可以去看这篇文章，安装nvm可以针对不同版本的项目选择对应的node版本，这样就会方便很多：nvm安装可切换不同版本nodejs_windows电脑nvm安装多版本nodejs-CSDN博客

基础的项目框架搭建，可以先去这个链接：

vue3+vite+typeScript+vueRouter+vuex+axios+element-plus搭建项目框架_vue3搭建框架-CSDN博客

这里把原来的element-ui换成element-plus

创建三个文件，分别为开发(development)、测试(test)、正式(production)三个打包环境文件，与原来vue2写法是不一样的，vue3写法：

 注意：获取环境配置的方法也变了，记得全局搜索，全局替换：

process.env.VITE_APP_baseUrl 换成 import.meta.env.VITE_APP_baseUrl

添加配置别名@，添加请求接口代理，添加打包优化

1）main.ts文件：

Vue2使用全局API来注册插件、混入、指令等，即通过Vue.use、Vue.mixin、Vue.directive等方法。这种方式有一些问题，比如可能造成命名冲突，也不利于模块化和按需加载。

Vue3使用局部API来注册插件、混入、指令等，即通过createApp方法创建一个应用实例，然后通过app.use、app.mixin、app.directive等方法。这种方式可以避免全局污染，也更符合模块化的思想。 

 按照下面这个对全局的api修改：

Vue.use 替换为：app.use

Vue.prototype 替换为： app.config.globalProperties

Vue.component 替换为： app.component

一通改。。。

有些需要特别改动的比较费事的先注掉，比如自定义指令，自定义组件等，等项目先跑起来，后面再慢慢改。

2）、有引用 element-ui 的替换成 element-plus

import { message, messageBox } from 'element-ui' 替换为

import { ElMessage, ElMessageBox } from 'element-plus'

改完后的main.ts文件：

3）、vuex引入的index.js 也需要改

4）、router文件中的index.js也需要改

5）、app.vue文件 替换成你原来的文件 就行

6）、ok ， npm run dev 启动项目吧，算是启起来了

接下来，开始更艰难的一步：一个页面一个页面的看着改吧：

类似于这样的：

slot="prefix" 改成  #prefix

slot="error" slot-scope="{ error }"  改成  #error="{ error }"

全局所有的插槽要注意啦：

原来是可以直接在标签上写slot，现在不行了，必须写在 

（1）全局搜索 slot-scope="scope" 直接全局替换 成  #default="scope"

（2）全局搜索 slot="content" 逐个改成 

（3）全局搜索 slot="append" 逐个检查 替换成

（4）全局搜索 slot="footer" 逐个检查 替换成

等等。。。一通改

elsub-menu  改成 el-sub-menu，包括样式里classname中的

换成import引入方式

原来：element-ui采用主题色更换的方式是在线定制主题色工具，直接下载下来引入项目中

现在：element-plus没找到在线定制主题色工具，因此需要修改下：

然后在 vite.config.ts：全局引入sass定义的所有变量

 至此主题色生效

项目中样式我分为两大类，一类是公共样式，公共样式里分为全局变量和公共需要的样式，一类是页面样式。

1）全局配置中文

2) el-dialog修改

 element-ui写法：

element-plus写法：

还有头部、脚部的插槽方式修改 

custom-class 也要弃用了，换成class:全局搜索，全局修改

3) el-pagination修改：

 element-ui写法：

element-plus写法：

4) el-descriptions修改：

 element-ui写法：

element-plus写法：

5) el-date-picker修改：

 element-ui写法：

以前这种写法，日期选择是可以正确显示的，但是现在老是只能显示选择的时间的1号，后来才发现是格式写的不对，全局改下

element-plus写法：

 

6) el-radio修改：

 element-ui写法：

element-plus写法：

直接改成正常的赋值写法就行 ，不用$set，vue3已经废弃$set啦

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名了，需要修改下：

改为  

改为  

在vue3中组件被多次注册就会报Invalid VNode type: undefined (undefined)的错，导致页面空白。 解决方式：引入 defineAsyncComponent 异步加载组件

全局搜索，全局修改

render-header改成scoped-slot

全局搜索，全局修改

button按钮的type="text"要废弃，改成link 

全局搜索，全局修改

出现这个问题，检查next方法是不是写了两次 ，执行了两次，去掉一个

官网vue3迁移地址：Vue 3 迁移指南

• 全局 Vue API 更改为使用应用程序实例

• v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化

 两者作用于同一个元素上时， 会拥有比  更高的优先级。

• v-on:event.native 事件修饰符已经被移除

  的  修饰符已被移除。

• 异步组件现在需要通过 defineAsyncComponent 方法进行创建

•  生命周期选项被重命名为 
•  生命周期选项被重命名为 

• Transition 的一些 class 被重命名

 过渡类名  修改为 、过渡类名  修改为 。

被移除的 API​

• keyCode 作为 v-on 修饰符的支持
• $on、$off 和 $once 实例方法
• 过滤器 (filter)
• 内联模板 attribute
• $children 实例 property
• propsData 选项
•  实例方法。用户不应该再手动管理单个 Vue 组件的生命周期。
• 全局函数  和  以及实例方法  和 。基于代理的变化检测已经不再需要它们了。

这里放一个别人写的修改清单，感觉清晰明了，觉得后面用的到：

Vue 2.x 项目升级到 Vue 3详细指南【修改清单】_vue2升级vue3-CSDN博客

 至此就结束啦，上面这些就是做升级做的一个笔记记录，最后就剩下一个页面一个页面测试检查，有问题再细改，到这里基本页面及操作都能正常，不会报错，就是还有一些警告，关于echarts的一些api废弃警告之类的，后面继续再改，有啥问题再继续记录，over~~~ 

好长时间没打开了，今天启动这个项目，直接报错：

于是就按照提示 删除package-lock.json and node_modules，但是无用，最后还是看了这个博客，才解决问题。就是从新设置了下淘宝镜像源，不知道啥原因。记录下吧~~~

# Vite项目启动服务器时报错 Error: Cannot find module @rollup/rollup-win32-x64-msvc.(三种方法解决)_rollup.win32-x64-msvc.node-CSDN博客

到此这篇vue2升级3（vue2升级vite）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/51132.html