Vue3-Vite项目中使用element-plus,按需导入element-plus组件和el-icon,以及自动导入Vue相关函数。
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。配置也更加简单,可以直接参考element-plus的官网。
安装依赖
npm i element-plus @element-plus/icons-vue
npm i unplugin-auto-import unplugin-vue-components unplugin-icons unplugin-element-plus -D
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需导入,自动导入
AutoImport({
// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
imports: ['vue'],
// 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
})
],
}),
Components({
resolvers: [
// 自动注册图标组件
IconsResolver({
// 前缀(经测试,该选项无作用,图标依然只能通过 i-ep-xxx 调用)
// <el-icon><Lock /></el-icon> 这样按需引入的话,这种形式的el-icon code就用不了了
// 只能 <el-icon><i-ep-lock /></el-icon>
enabledCollections: ['ep'],
}),
// 自动导入 Element Plus 组件
ElementPlusResolver({
importStyle: 'sass'
})
],
}),
Icons({
autoInstall: true,
}),
// 手动导入 el 组件,会自动添加对应的 css
// 替换默认语言
ElementPlus({
defaultLocale: 'zh-cn',
useSource: true
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
element-plus官网所使用的el-icon格式化为
而采用以上按需导入icon的方法则需要使用以下图标格式
本文章参考内容:
- ice-cream-admin
- [vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入](https://blog.csdn.net/qq_34569497/article/details/130411712?ops_request_misc={"request_id"%3A"170273200116800180629771"%2C"scm"%3A"20140713.130102334.."}&request_id=170273200116800180629771&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-130411712-null-null.142v96pc_search_result_base8&utm_term=element-plus icon自动导入&spm=1018.2226.3001.4187)