写在开头
在公司中使用 Vue3 有一阵子了，当然，上 Vue3 的系统都是一些公司内部人员使用的后台系统，毕竟， 使用 Vue3 还是要承担不少 "兼容性" 上的风险的。
而在今年的开年初，尤雨溪大佬已经是把 Vue3 作为了默认版本，这也宣布 Vue 即将进入 3 版本时代了，这份开年礼物还是相当有分量的
基于
Vue3 开发的 element-plus 组件库也送来一份礼品，就是 element-plus 也将正式发布稳定版本。
之前饱受
beta 版本的"折磨"，这下终于能解放了吧？(✪ω✪)
重大更新
TypeScript 与 Vue 3
Element Plus 使用 TypeScript 与 Vue 3.2 开发，提供完整的类型定义文件。并使用 Composition API 降低耦合，简化逻辑。
设计
组件大小体系由 default/medium/small/mini 切换为更自然的 large/default/small，以 default 为基础，需要加大则选择 large，需要缩小则选择 small。
padding 方面则优化为更通用的 4px 体系，采用 4/8 px 作为原子单位控制整个系统的 padding 一致性。即大组件 padding 也大，小组件 padding 也小。具体细节请参阅 size 修改说明。
图标
为了使用 Element Plus 内置的图标，用户往往需要引用一个 ~75KB 的字体文件，以及 1 个额外的网络请求，这个在大多数情况下属于完全不需要的开销，对体积以及首页加载速度很在意的用户来说，这属于是一个长久的痛点。
因此我们把所有的 Font Icon 都改为了 Inline Vue SVG 组件，也就是说所有的组件都是跟随你的打包代码一起放在同一个请求内，这样就不会产生额外的网络请求去请求字体文件，也不会带来网络请求失败导致字体渲染不出来的小方块，并且图标的清晰度也会更好。
配置
Element Plus 新增了一个全局配置管理的组件 config-provider，以替代 Element UI 的全局配置 Vue.prototype.$ELEMENT。 您可以通过以下两种方式来进行全局配置。
// 方式一 main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')
// 方式二 APP.vue
<template>
<el-config-provider :size="small">
<el-button>Button</el-button>
</el-config-provider>
</template>
复制代码
如需了解更多 API 变动细节，请参阅 Element Plus 不兼容变化和升级指南。
新组件和设计资源
在迁移完现有组件的基础上，正式版本中增加了 Space, Skeleton, Empty 和 Affix 四个全新组件丰富开发者的选择。以及增加了使用虚拟滚动的 Select-V2 组件来优化长列表的展示性能问题。
同时我们也制作上传了包含所有组件信息的最新 Figma 设计资源 文件，方便产品经理和设计师的使用。
正式版的发布意味着整体迁移适配工作的结束，API 设计基本稳定，但这只是一个开始。在后续的迭代工作中，我们将集中精力在优化交互细节，新增额外功能上，包括但不仅限以下内容：
暗色主题
正式版中，我们集成了 CSS Variables 的全新能力，这将比之前的 SASS 变量配置模式更方便且性能更好。在这套能力的基础上，我们正在紧张开发暗色主题，很快会在后续版本中与大家见面。
高性能表格组件
在 Beta 发布的时候，我们提到过提供使用虚拟化能力的表格，来优化大数据量情况下的 Table 组件性能。但本次的正式版发布暂未包含这部分功能，而会在后续的迭代中加入。一直没有把这个功能落地下来有很大一部分原因是，我们一直在探索到底哪一种方式是更加适合用户的。是我们直接加入虚拟化的表格渲染引擎，亦或是我们提供渲染接口让用户自己添加虚拟化的组件（类似 vue-virtual-scroller 这样的组件）来自行渲染。后续我们会参考结合现在市面上相关组件的实现，提供一套解决方案，让 Element Plus 的 Table 组件更加好用。
记录一下升级过程
本章节，就来记录一下把公司的项目里面的 element-plus 从 beta 升级到稳定版本以及vue版本升级遇到的问题。
先贴一下原本项目中 package.json 文件的依赖信息：
{
"name": "element-plus",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"dev": "vue-cli-service serve --open",
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"dayjs": "^1.10.4",
"echarts": "^5.0.2",
"element-plus": "^1.0.2-beta.32",
"element-resize-detector": "^1.2.1",
"hard-source-webpack-plugin": "^0.13.1",
"lodash": "^4.17.20",
"nprogress": "^0.2.0",
"qs": "^6.9.6",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuedraggable": "4.0.1",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/element-resize-detector": "^1.1.2",
"@types/jest": "^24.0.19",
"@types/lodash": "^4.14.168",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"sass": "^1.27.0",
"sass-loader": "^10.0.4",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
]
}
}
安装最新element-plus版本
卸载element-plus版本然后. (element-plus版本从1.0.2.beta-→升级到2.2.5最新版本)
yarn add element-plus
安装完后，重新启动项目，Em...项目肯定是起不了。。。
报错一
因为项目中有两个文件引用了
element-plus 包中组件的 TS 类型文件，而 element-plus 稳定版中的项目结构稍微有改变，造成了路径出现问题。
这比较好解决，直接修改相关路径即可
import { ElMessageBoxOptions } from "element-plus/lib/components/message-box/src/message-box.type";
import Message from"element-plus/lib/components/message";
报错二
因为项目使用
element-plus 的时候，样式文件是直接全局引入的(ㄒoㄒ)，这就还是会出现路径问题。
再次修改。
@use "element-plus/theme-chalk/src/index.scss" as *;
.mjs文件中报错问题
element-plus 项目打包后，会在 element-plus/dist/locale 文件夹下生成一些组件的 .mjs 文件，这是一类和"国际化功能"相关的文件，源文件是在 element-plus/lib/locale 文件夹下。
这个报错是 webpack 内置并没有处理 .mjs 文件的能力，我们可以通过配置 rules 规则来绕过 webpack 的自动处理
//.mjs文件中报错问题
config.module.rules = [
...config.module.rules,
...[
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
];
升级sass版本
yarn add sass@1.53.0
注意：sass版本升级到正式版element-plus源码用的sass版本
升级vue版本
这是一些
vue 方法报错，我们直接来升级 vue 版本。
卸载vue版本然后(vue版本从3.0.0--->升级到3.2.37最新版本)
yarn add vue
升级typescript
vue 升级后，vue 中导出的 Composition API 直接就找不到了，两种原因，要么 Composition API 重新定义了，要么就是 TS 定义的类型问题，很明显是后者，而且不可能是只是单纯名称上的问题，从 stackoverflow 找到的答案说是版本问题。
直接升级版本就能解决，那就继续升它。
yarn add typescript
升级 @vue/compiler-sfc 插件
解释：【vue-compiler-sfc主要是用来解析SFC组件，我们都知道，一个SFC（*.vue）文件三大要素是template、script、style，vue-compiler-sfc就是负责解析这三大要素。】
后期发现需要升级@vue/compiler-sfc这个依赖包才能使用vue3.2版本script setup的语法糖
yarn add @vue/compiler-sfc
注意：如果项目依赖关系的组件库或者插件也要同步升级，要不导致vue、element-plus、sass版本不一致
升完后，重新启动项目，Em...项目终于能跑起来了，成功了一小步呢。
element-plus升级后带来的页面问题
1. 菜单组件名称变更
这个问题是，由于 element-plus 把原本的 el-submenu 组件的名称改成了 el-sub-menu 导致的，我们直接改一下标签名即可解决。
2. 图标没显示
这个问题是，因为项目中使用图标时，一直使用的是类名 +
<i/> 标签来显示图标的形式，也就是原本 element-ui 那套形式，但是 element-plus 现在把图标做成一个独立组件，并且独立分包，需要独立安装。
$ yarn add @element-plus/icons-vue
这个问题其实挺难受的，都是些工作量的问题，整个项目用到多少图标就要改多少地方。
3. 按钮组件size属性改变
这个问题是，
element-plus 把原本的 button 组件的 size 属性值进行了重新定义，原先我们使用的是 medium / small / mini ，现在变更成 large / default / small 属性值。
还有之前button组件type='text'也改为了link属性
又是一个难受的问题，用到多少 button 组件的 size 属性就要改多少地方
4. 表格中滚动条用了自行开发的滚动条组件
element-plus 表格中的滚动条用了自行开发的 滚动条组件，这会导致两个问题，首先是滚动条变细了，其二是滚动条一开始是不显示的，只有鼠标移动到上面才会展示，这不知道算不算问题。
5. 处理好多组件兼容问题、样式调整，与之前beta版本API的调整
好了，就先记录到这里了，后面如果还遇到其他问题再接着补上吧，小编要继续去修 bug 去了。
6. 升级后打包文件体积过大导致首页渲染过慢的问题
1. 因为正式版本icon用的svg字体文件，要做按需导入。如果整个导入字体文件过大
2. gzip压缩优化，提高首屏幕渲染速度（这个服务端也要配合）
