自动按需导入

Element Plus 自动按需导入

按需导入 - 自动导入 (可选)

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 和 unplugin-element-plus

npm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus

然后把下列代码插入到 Vite 的配置文件中 (https://element-plus.org/zh-CN/guide/quickstart.html#vite)

// vite.config.ts
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import ElementPlus from 'unplugin-element-plus/vite';

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus(),
  ],
});

配置 tsconfig.app.json：在 include 中增加 auto-imports.d.ts，否则在使用ElMessage等方法时，ts 会报错

完成以上配置后，就可以在页面中直接使用 Element Plus 的组件（自动按需导入）。

或者完整导入

main.ts

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

安装图标
bash
```
pnpm i @element-plus/icons-vue
```
注册图标，可以在组件中按需导入，也可以进行全局注册 Icon 图标 | Element Plus (element-plus.org)
自动导入 iconify 上的图标 (可选)
使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集，方法可参照下面这个链接：
element-plus-best-practices/vite.config.ts at db2dfc983ccda5570033a0ac608a1bd9d9a7f658 · sxzz/element-plus-best-practices · GitHub
链接里使用的是 eq 图标集，可以根据自己的需要，换成别的图标集。安装图标集：pnpm i -D @iconify-json/图标集名
示例：如果要使用 svg-spinners 图标集，可以按照上述方法配置好后，安装 @iconify-json/svg-spinners
bash
```
pnpm i -D @iconify-json/svg-spinners
```
然后更改 vite.config.ts 这里 enabledCollections: ['ep'] 为 enabledCollections: ['svg-spinners'] 即可。
使用时，可以用 el-icon 组件包裹，也可以直接使用组件（不用导入）：
vue
```
<template>
  <el-icon :size="200" color="red">
    <i-svg-spinners-blocks-wave />
  </el-icon>
</template>
```
组件使用方法：i-图标集名-图标名

所有图标，可以在 Icon Sets • Iconify 或 Icônes (icones.js.org) 上浏览查找。
tips：地址栏可以直接看到图标集名称

安装 VueUse

VueUse 是一款基于 Vue 组合式 API 的实用工具集

bash

pnpm i @vueuse/core

自动导入（可选）

参考：

根据以上配置，可以实现 vue、vue-router、VueUse、vue-i18n、pinia 等 API 的自动导入，提升开发效率

vite.config.ts

import { fileURLToPath, URL } from 'node:url';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import ElementPlus from 'unplugin-element-plus/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';

const pathSrc = path.resolve(__dirname, 'src');

// https://vitejs.dev/config/
export default defineConfig({
  base: '/gogo-vue3-admin-template',
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core',
        'vue-i18n',
        'pinia',
        {
          axios: [
            ['default', 'axios'], // import { default as axios } from 'axios',
          ],
        },
        {
          from: 'vue-router',
          imports: ['createRouter', 'createWebHistory'],
          type: false,
        },
        {
          from: 'vue-i18n',
          imports: ['createI18n'],
          type: false,
        },
        {
          from: 'axios',
          imports: ['AxiosResponse'],
          type: true,
        },
      ], // 自动导入
      resolvers: [
        ElementPlusResolver(), // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox...
        IconsResolver({ prefix: 'Icon' }), // 自动导入图标组件
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
      eslintrc: {
        enabled: true,
      },
    }),
    Components({
      resolvers: [
        IconsResolver({ enabledCollections: ['svg-spinners'] }), // 自动注册图标组件
        ElementPlusResolver(), // 自动导入 Element Plus 组件
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
    }),
    Inspect(),
    ElementPlus({}),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 variables.scss 这样就可以在全局中使用 variables.scss中预定义的变量了
        additionalData: `@use "@/styles/variables.scss" as *;`,
      },
    },
  },
});

自动按需导入 ​

Element Plus 自动按需导入 ​

安装 VueUse ​

自动导入 （可选） ​

自动按需导入

Element Plus 自动按需导入

安装 VueUse

自动导入（可选）