大家好，我是讯享网，很高兴认识大家。



为保证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，现在不行了，必须写在 <template>标签上

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

（2）全局搜索 slot="content" 逐个改成 <template #content>的写法

（3）全局搜索 slot="append" 逐个检查 替换成 <template #append>的写法

（4）全局搜索 slot="footer" 逐个检查 替换成 <template #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 实例方法</li><li>过滤器 (filter)</li><li>内联模板 attribute</li><li>\)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博客