1.关于自动引用element-plus：
a. 因为新版本的element-plus/lib/component文件夹下的所有组件都把原来的el前缀去掉了，所以导入babel-plugin-import这个库，进行自动导入会报错，新的版本我比较喜欢用官方推荐的自动导入来完成项目
// a.导入官方推荐库
// 版本过高的话会报错：TypeError: AutoImport is not a function or TypeError: Components is not a function
// 我使用的版本是"unplugin-auto-import": "^0.16.2", "unplugin-vue-components": "^0.22.0"，node版本为19.8.1，vuecli5
// 导入 "unplugin-element-plus" 这个库，保证ElLoading等组件库的样式完整，要不然就会样式丢失
npm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
// b.在vue.config.js中加入如下代码（直接粘贴复制即可）
// 因为在vue新的版本中，webpack.config.js已经被移除了，所以得写在vue.config.js中，所以写 configureWebpack
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 添加这一行（保证ElLoading等组件库的样式完整，要不然就会样式丢失）
const ElementPlus = require('unplugin-element-plus/webpack')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: './build',
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
},
//配置webpack自动按需引入element-plus
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})，
// 添加这一行
ElementPlus()
]
}
})
b.因为element-plus更新速度太快，所以引入ElLoading和ILoadingInstance的路径已经发生了改变，新版本的ILoadingInstance接口名改为了LoadingInstance，去掉了I，所以在引入type的时候应该这么写
原来的 import { ILoadingInstance } from 'element-plus/lib/el-loading/src/loading.type'
改为
现在的 import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading'
2.关于自动引用element-plus的icons
a.首先在项目中引入unplugin-icons和unplugin-auto-import
// 如果正常下载的话，会因为版本过高而报错 TypeError: IconsResolver is not a function，我这里下载的是 "unplugin-icons": "^0.14.1",不过这个也不是绝对，根据你的系统版本走
npm install unplugin-icons unplugin-auto-import -D
b.在vue.config.js中做如下配置（凡是加备注的地方都必须要添加，要不然就会报错）
const { defineConfig } = require('@vue/cli-service')
// 添加下面一行
const IconsResolver = require('unplugin-icons/resolver')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const ElementPlus = require('unplugin-element-plus/webpack')
// 添加这一行
const Icons = require('unplugin-icons/webpack')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: './build',
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
},
//配置webpack自动按需引入element-plus
plugins: [
AutoImport({
resolvers: [
// Auto import icon components
// 自动导入图标组件
IconsResolver({
prefix: 'Icon'
}),
ElementPlusResolver()
]
}),
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep']
}),
ElementPlusResolver()
]
}),
ElementPlus(),
// 添加这一行
Icons({
autoInstall: true
})
]
}
})
c.最后，必须添加@iconify-json/ep这个库，要不然图标不显示
npm install @iconify-json/ep
// 在代码用引用如下：
<template #label>
<span lass="tab-item">
// 单独使用
<i-ep-User />
<span class="tab-content">账号登录</span>
</span>
</template>
或者
<template #label>
<span lass="tab-item">
// 嵌套使用
<el-icon :size="size" :color="color">
<i-ep-User />
</el-icon>
<span class="tab-content">账号登录</span>
</span>
</template>
3.<el-image />在<el-table></el-table>中出现图层嵌套bug，如下图所示：
image.png
解决方法：在<el-image />中加入preview-teleported属性
<template #image="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.imgUrl"
:preview-src-list="[scope.row.imgUrl]"
preview-teleported
/>
</template>
// preview-teleported ：image-viewer 是否插入至 body 元素上
