Created
October 11, 2024 08:35
-
-
Save xinglongjizi/045bf0633191ed5ad44f589e237d82fc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 背景: | |
| apmweb3的工程搭建得很早,vue的版本是3.2.31,element-plus的版本是2.3.4,element-plus的版本太低了 | |
| 现在要写一个新页面,需要实现树形的虚拟表格,就需要用到element-plus的el-table-v2组件, | |
| 由于工程的element-plus的版本太低,el-table-v2组件也没迭代多少个版本,bug或者说功能不完全。 | |
| 因此就需要升级element-plus的版本,element-plus的GitHub上的源码的package.json中有个配置是 | |
| "peerDependencies": { | |
| "vue": "^3.2.0" | |
| }, | |
| 说明vue的版本不用升级, | |
| 如果升级element-plus的话,从2.3.4升级到2.8.4,必然会导致原来使用老版本element-plus的页面带来很多不可预测的兼容性影响,比如element-plus的某些组件的api的变化,dom结构的变化,样式类定义的变化等。 | |
| 因此现在的需求是,怎么让这个将要新写的页面,单独使用最新版本的element-plus,而不影响老页面。 | |
| 方案: | |
| 在一个测试工程中使用 npm install安装最新版本的element-plus,然后到node_modules文件夹中将element-plus拷贝出来,到apmweb3的工程中的src文件夹中,比如粘贴进src/components下 | |
| 这样的element-plus就像是我们本地自己写的组件集一样 | |
| 不需要再main.ts去全局引入、也不用管整个工程中的配置的按需自动导入node_modules中的element-plus | |
| 我们只需要在自己的组件你里这么引入即可 | |
| import { ElTableV2 as TbV2 } from '@/components/element-plus' | |
| import { ElWatermark as HiWater } from '@/components/element-plus/lib/components/watermark' | |
| import '@/components/element-plus/es/components/table-v2/style/css' | |
| 解释: | |
| 秩序导入两个东西,组件的js和css | |
| as一下最好,因为害怕触发自动导入,自动导入的话就是导入的node_modules中的element-plus了 | |
| 导入组件js有两种方式,第一种是简洁的,会自动按照es的导入逻辑去查找要导入的包 | |
| 第二种是直接找到具体位置了 | |
| 导入css直接写具体位置 | |
| 这种导入方式,参照element-plus官网的指导,手动按需导入 | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment