Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save xinglongjizi/045bf0633191ed5ad44f589e237d82fc to your computer and use it in GitHub Desktop.

Select an option

Save xinglongjizi/045bf0633191ed5ad44f589e237d82fc to your computer and use it in GitHub Desktop.
/*
背景:
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