【Web系列二十九】前端组件图标按需引入

目录

写在前面

组件图标完全自动按需引入

安装依赖

配置

vite.config.ts

main.ts

使用

ESlint校验

解决方案

vite.config.ts

.eslintrc.cjs

问题

无法找到组件

样式丢失

原因分析

---

写在前面

        之前在开发时使用了element-plus的一些组件，并通过按需引入的方式使用，但是在使用时发现了一些问题，特此记录一下。

组件图标完全自动按需引入

安装依赖

"vue": "^3.4.29",
"vue-router": "^4.0.10",
"element-plus": "^2.7.6",
"@element-plus/icons": "^0.0.11",
"@iconify-json/ep": "^1.1.14",
"@vitejs/plugin-vue": "^5.0.5",
"unplugin-icons": "^0.19.0",
"unplugin-auto-import": "^0.17.6",
"unplugin-vue-components": ""^0.27.1"

配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default ({ command, mode }) => {return defineConfig({plugins: [vue(),AutoImport({// Auto import functions from Vue, e.g. ref, reactive, toRef...// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue', 'vue-router'],// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)resolvers: [// 自动导入 Element Plus 组件ElementPlusResolver({importStyles: 'sass'}),// Auto import icon components// 自动导入图标组件IconsResolver({prefix: 'Icon',}),]}),Components({resolvers: [// 自动导入 Element Plus 组件ElementPlusResolver({importStyles: 'sass'}),// Auto import icon components// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],})],}),Icons({autoInstall: true,})]})
}

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus, { locale: zhCn }) // 组件中文化
app.mount('#app')

使用

        无需再次引入，对于组件直接使用官方组件名称即可使用，而对于图标来说，只要在官方图标名称前加上前缀IEp即可使用。

<el-button />
<ElButton /><i-ep-edit />
<IEpEdit />

ESlint校验

        这时已经可以按需引入组件了，但是如果使用了eslint校验的话，会报错，比如：

error 'ref' is not defined

解决方案

vite.config.ts

        增加以下内容

export default ({ command, mode }) => {return defineConfig({plugins: [AutoImport({// 避免按需引入导致eslint报错eslintrc: {enabled: true,filepath: './.eslintrc-auto-import.json',globalsPropValue: true},}),]})
}

.eslintrc.cjs

        增加以下内容

module.exports = {extends: ['./.eslintrc-auto-import.json']
}

问题

无法找到组件

        按需引入后，在ts或js中直接使用组件API会出现找不到组件的情况。

import { ElMessage } from 'element-plus'

        创建auto-imports.d.ts文件

export {}
declare global {const ElLoading: typeof import('element-plus')['ElLoading']const ElMessage: typeof import('element-plus')['ElMessage']const ElMessageBox: typeof import('element-plus')['ElMessageBox']
}

        在tsconfig.app.json中添加一行代码

{"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue",//添加这行"auto-imports.d.ts"],
}

样式丢失

        按需引入后，在ts或js中直接使用组件API会出现样式缺失的问题。

import { ElMessage } from 'element-plus'

        这时候需要手动导入样式。

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

原因分析

        出现“找不到组件”和“样式丢失”问题的原因都是因为按需引入的原理是监听vue页面，ts页面先行使用的话不会被监听到，只有vue页面使用了，后面再刷新按需引入，则auto-import才会更新内容。