记录一下公司项目中element |
您所在的位置:网站首页 › 升级vue3到最新版本 › 记录一下公司项目中element |
写在开头
在公司中使用 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 [email protected] -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 [email protected] -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. 图标没显示这个问题是,因为项目中使用图标时,一直使用的是类名 + 标签来显示图标的形式,也就是原本 element-ui 那套形式,但是 element-plus 现在把图标做成一个独立组件,并且独立分包,需要独立安装。 npm install @element-plus/icons-vue -S这个问题其实挺难受的,都是些工作量的问题,整个项目用到多少图标就要改多少地方。>_ _ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |