Vue&ElementPlus 按需导入

按需导入是指只导入项目中实际使用的组件或模块，而不是导入整个库，好处是减少打包体积。

按需导入分为两种：

传统按需导入

javascript 复制代码

import { ElButton, ElInput } from 'element-plus'

export default {
    components: {
        ElButton,
        ElInput,
    }
}

优点：

精确控制导入内容
明确的依赖关系

缺点：

需要手动维护导入列表
添加新组件时需要修改代码

自动导入

自动导入是通过工具自动检测并导入使用的组件/函数，无需手动编写导入语句。

arduino 复制代码

export default {
    components: {
        ElButton,
        ElInput,
    }
}

优点：

减少样板代码
提高开发效率
保持代码简洁

缺点：

初次配置较复杂
需要了解工具链
可能影响代码可读性（不知道从哪里导入的）
有些写法不支持自动导入

建议使用按需手动import导入，简单、无需额外配置，也能达到减少打包体积的目的。

接下来展示具体的代码实现按需自动导入。

1.初始化项目

bash 复制代码

# 创建项目
npm create vite@latest auto-import-demo
# 选择Vue和TypeScript，进入到项目目录
cd auto-import-demo
# 安装依赖
npm install

2.安装Element Plus和自动导入插件

bash 复制代码

npm install element-plus
npm install @element-plus/icons-vue
npm install -D unplugin-vue-components unplugin-auto-import

3.配置vite.config.ts

typescript 复制代码

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 Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 vue相关函数
            import: ['vue']
            resolvers: [
                // 自动导入Element Plus组件
                ElementPlusResolver(),
                // 自动导入图标
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],
            // 生成自动导入的TypeScript声明文件
            dts: 'src/auto-imports.d.ts',
        }),
        Components({
            resolvers: [
                // 自动导入Element Plus 组件
                ElementPlusResolver(),
                // 自动导入element-plus图标
                IconsResolver({
                    enabledCollections: ['ep'],
                    prefix: 'Icon',
                }),
            ],
            // 配置组件自动导入
            dts: 'src/components.d.ts',
            dirs: [
                'src/components',
                'src/views',
            ],
            deep: true,
        }),
        Icons({
            autoInstall: true,
        }),
    ],
})

4.重启服务使配置生效

5.在模版中使用

vue 复制代码

<template>
<!--  <el-input placeholder="请输入" :prefix-icon="IconEpUser"/>-->
<!--  <el-button type="primary" icon="IconEpPlus">Button</el-button>-->
    <el-button type="primary">
        <el-icon><IconEpUser /></el-icon>
    Button
    </el-button>
</template>

说明：

图标组件名是IconEpUser，Icon是前缀，Ep代表Element Plus图标库，以上2点和vite.config.ts配置一致，后面是图标名（大小写敏感）
使用时，模板内变量IconEpUser会被自动导入（在components.d.ts中声明为全局导入：IconEpUser: typeof import('~icons/ep/user')['default']），无需手动import
:prefix-icon和icon都是不支持自动导入图标，需要改为以下写法

vue 复制代码

<el-input placeholder="请输入">
    <template #prefix>
        <el-icon>
            <IconEpUser/>
        </el-icon>
    </template>
</el-input>