Vue

开发技巧、常用组件与插件的总结与实践

按需自动导入组件与图标

Element Plus 自动按需导入

1. 安装插件

   安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

   pnpm add -D unplugin-vue-components unplugin-auto-import unplugin-icons

2. 在 vite.config.ts 中添加以下配置

   import { resolve } from 'node:path'
   import AutoImport from 'unplugin-auto-import/vite'
   import { FileSystemIconLoader } from 'unplugin-icons/loaders'
   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'
   
   export default defineConfig({
     ssr: {
       noExternal: ['element-plus', /^element-plus\/.*/],
     },
     plugins: [
       AutoImport({
         imports: ['vue', 'vue-router', '@vueuse/core'],
         resolvers: [
           ElementPlusResolver(),
         ],
       }),
       Components({
         resolvers: [
           ElementPlusResolver(),
           IconsResolver({
             prefix: 'icon',
             enabledCollections: ['ep'],
             customCollections: ['esri'],
           }),
         ],
         include: [/\.vue($|\?)/, /\.md($|\?)/],
         extensions: ['vue', 'md'],
       }),
       Icons({
         customCollections: {
           esri: FileSystemIconLoader(resolve('./esri_symbol_3d'), svg =>
             svg.replace(/^<svg /, '<svg fill="currentColor" ')),
         },
       }),
     ],
   })

3. 使用

<script lang="ts" setup>
const value = ref(3.5)
</script>

<template>
  <div flex="~ gap-2 items-center">
    <ElRate v-model="value" />
    <icon-ep-star />
    <icon-ep-UserFilled />
    <span color="red">
      <icon-esri-Accessibility />
    </span>
  </div>
</template>

隐藏源代码