写在开头
在公司中使用 Vue3 有一阵子了，当然，上 Vue3 的系统都是一些公司内部人员使用的后台系统，毕竟， 使用 Vue3 还是要承担不少 "兼容性" 上的风险的。
而在今年的开年初，尤雨溪大佬已经是把 Vue3 作为了默认版本，这也宣布 Vue 即将进入 3 版本时代了，这份开年礼物还是相当有分量的。
不过，新年礼物不止一份，基于 Vue3 开发的 element-plus 组件库也送来一份礼品，就是 element-plus 也将正式发布稳定版本。
之前饱受 beta 版本的"折磨"，这下终于能解放了吧？(✪ω✪)
本章节，就来记录一下把公司的项目里面的 element-plus 从 beta 升级到稳定版本遇到的问题。
先贴一下原本项目中 package.json 文件的依赖信息：
{
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"echarts": "^5.2.2",
"qrcode.vue": "^3.3.3",
"vue": "^3.0.11",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.5",
"vuex": "^4.0.0",
"wangeditor": "^4.6.13",
"element-plus": "^1.0.2-beta.36",
},
"devDependencies": {
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "^4.5.12",
"@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-plugin-router": "^4.5.12",
"@vue/cli-plugin-typescript": "^4.5.12",
"@vue/cli-plugin-unit-jest": "^4.5.12",
"@vue/cli-plugin-vuex": "^4.5.12",
"@vue/cli-service": "^4.5.12",
"@vue/compiler-sfc": "^3.0.11",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-rc.4",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.8.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"typescript": "^3.9.9",
"vue-jest": "^5.0.0-0",
"zip-webpack-plugin": "^4.0.1"
}
}
复制代码安装最新element-plus版本
npm install element-plus@2.0.3 -D
复制代码安装完后，重新启动项目，Em...项目肯定是起不了。。。
报错一
因为项目中有两个文件引用了 element-plus 包中组件的 TS 类型文件，而 element-plus 稳定版中的项目结构稍微有改变，造成了路径出现问题。
这比较好解决，直接修改相关路径即可。
import { NotificationHandle } from 'element-plus/lib/components/notification/src/notification';
复制代码报错二
因为项目使用 element-plus 的时候，样式文件是直接全局引入的(ㄒoㄒ)，这就还是会出现路径问题。
再次修改。
import 'element-plus/dist/index.css';
复制代码.mjs文件中报错问题
element-plus 项目打包后，会在 element-plus/dist/locale 文件夹下生成一些组件的 .mjs 文件，这是一类和"国际化功能"相关的文件，源文件是在 element-plus/lib/locale 文件夹下。
这个报错是 webpack 内置并没有处理 .mjs 文件的能力，我们可以通过配置 rules 规则来绕过 webpack 的自动处理。
configureWebpack: {
module: {
// https://webpack.docschina.org/configuration/module#rulerules
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
},
}
复制代码升级vue版本
这是一些 vue 方法报错，我们直接来升级 vue 版本。
npm install [email protected] --f
复制代码--force 或者 -f 参数可以直接强制安装一个新版本，因为每次 npm install 会先检查 node_modules 是否存在该模块，存在则不再安装，--force 或者 -f 参数可以直接强制安装新版本。
升级 typescript 版本
vue 升级后，vue 中导出的 Composition API 直接就找不到了，两种原因，要么 Composition API 重新定义了，要么就是 TS 定义的类型问题，很明显是后者，而且不可能是只是单纯名称上的问题，从 stackoverflow 找到的答案说是版本问题。
直接升级版本就能解决，那就继续升它。
npm install typescript@4.3.5 -f
复制代码升完后，重新启动项目，Em...项目终于能跑起来了，成功了一小步呢。
稳定版本之间的简单介绍
截止到目前，也就是2022年02月28号这天，现在只有四个稳定版本，分别是 2.0.0、2.0.1、2.0.2、2.0.3，都是小版本之间的差异，并没有大版本改变，估计大多都是修复一些 fix 而已。小编查看了 element-plus 文档上的更新日志信息，并尝试升级切换 2.0.0 和 2.0.3 这两个的版本，再去对比项目中部分页面，呃......基本来说，两者并没有太大影响区别，如果确定想要 element-plus 升级稳定版本可以直接上 2.0.x 版本即可。
element-plus升级后带来的页面问题
1. 菜单组件名称变更
这个问题是，由于 element-plus 把原本的 el-submenu 组件的名称改成了 el-sub-menu 导致的，我们直接改一下标签名即可解决。
2. 图标没显示
这个问题是，因为项目中使用图标时，一直使用的是类名 + <i/> 标签来显示图标的形式，也就是原本 element-ui 那套形式，但是 element-plus 现在把图标做成一个独立组件，并且独立分包，需要独立安装。
npm install @element-plus/icons-vue -S
复制代码这个问题其实挺难受的，都是些工作量的问题，整个项目用到多少图标就要改多少地方。>_<
3. 按钮组件size属性改变
这个问题是，element-plus 把原本的 button 组件的 size 属性值进行了重新定义，原先我们使用的是 medium / small / mini ，现在变更成 large / default / small 属性值。
又是一个难受的问题，用到多少 button 组件的 size 属性就要改多少地方。>_<
4. 分页组件样式问题
分页组件样式好像也有点奇怪，上边框不见了。
这个问题是，分页组件中的 input 标签总高度是 36px，但是 height 设置了 32px 写死导致的，修复只有设置 box-sizing: border-box，或者 height: 36px 即可解决。
（这只是我们公司项目中公共样式冲突了）
5. 表格中hover样式的问题
表格中的 hover 属性权重变大了，比自定义在列中添加的类名权重大。
这应该比较好改，增加自定义列中的类名权重即可，或者直接就是 !important 粗暴解决。
6. 表格中滚动条用了自行开发的滚动条组件
element-plus 表格中的滚动条用了自行开发的 滚动条组件，这会导致两个问题，首先是滚动条变细了，其二是滚动条一开始是不显示的，只有鼠标移动到上面才会展示，这不知道算不算问题。-.-
7. 任何弹窗、消失后都会一个报错
项目中点任何弹窗或者输入框聚焦后，让弹窗消失或者输入框失去焦点后，页面控制台都会有一个报错信息。
经过仔细深究后发现，竟然是引入的百度地图的问题。。。
好了，就先记录到这里了，后面如果还遇到其他问题再接着补上吧，小编要继续去修 bug 去了。
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。