vite项目中自动导入element-plus组件及icon图标实现方法和注意事项

自动导入组件

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

配置vite.config.js文件：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      // 自动导入 Element Plus 相关函数
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // 自动导入 Element Plus 组件
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

自动导入组件unplugin-vue-components所有默认配置

Components({
      // relative paths to the directory to search for components.
      // 要搜索组件的目录的相对路径
      dirs: ['src/components'],

      // valid file extensions for components.
      // 组件的有效文件扩展名。
      extensions: ['vue'],

      // search for subdirectories
      // 搜索子目录
      deep: true,

      // resolvers for custom components
      // 自定义组件的解析器
      resolvers: [],

      // generate `components.d.ts` global declarations,
      // also accepts a path for custom filename
      // 生成 `components.d.ts` 全局声明，
      // 也接受自定义文件名的路径
      dts: false,

      // Allow subdirectories as namespace prefix for components.
      // 允许子目录作为组件的命名空间前缀。
      directoryAsNamespace: false,

      // 忽略命名空间前缀的子目录路径
      // 当`directoryAsNamespace: true` 时有效
      // Subdirectory paths for ignoring namespace prefixes
      // works when `directoryAsNamespace: true`
      globalNamespaces: [],

      // auto import for directives
      // default: `true` for Vue 3, `false` for Vue 2
      // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
      // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
      // 自动导入指令
      // 默认值：Vue 3 的`true`，Vue 2 的`false`
      // 需要 Babel 来为 Vue 2 进行转换，出于性能考虑，它默认处于禁用状态。
      directives: true,

      // filters for transforming targets
      include: [/.vue$/, /.vue?vue/],
      exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/],
})

自动导入icon图标

npm install unplugin-icons -D

配置vite.config.js文件：

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 defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [
        // 自动导入 Element Plus 相关函数
        ElementPlusResolver(),
        IconsResolver() // 可以不配置，配置也不生效
      ],
    }),
    Components({
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        IconsResolver({
          // prefix: 'i', 默认前缀是‘i’
          enabledCollections: ['ep'] // 使用哪个图标库
        })
      ],
    }),
    Icons({
      // 自动安装图标库
      autoInstall: true
    })
  ],
})

提示： 自动导入icon图标的icon,只需要以{prefix}-{collection}-{icon}格式来使用。

element-plus 的图标库名称是 “ep”，默认前缀是 “i”，需要改的话可以在 Components 配置项 的 IconsResolver 中进行相应配置，在 AutoImport 下的 IconsResolver 中配置不会生效，可以不进行配置，也可以使用自动导入图标。

使用方式：

<i-ep-caret-top></i-ep-caret-top>
// 或者
<el-icon>
  <i-ep-upload-filled />
</el-icon>

i-ep-图标名称，使用的icon图标就是element-plus的图标，图标可以在element-plus官网上查看。 如果没有配置 Components下 IconsResolver 的话，除了 ep 图标库，其他图标库的图标也可以使用