【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才会更新内容。