vue3自动引入组件、图标、自定义图标

自动引入elementPlus组件、vue组件和vue-router组件

安装依赖

"unplugin-auto-import": "^0.15.2"
"unplugin-vue-components": "^0.24.1"

vite.config.ts中新增导入

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

plugins属性中新增如下代码

	AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router'],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

这个时候就可以无需import组件直接使用组件了。

启动项目后根目录会新增两个文件auto-imports.d.ts和components.d.ts分别对应刚才在plugins中添加的自动导入配置信息AutoImport和Components

消除组件爆红但是正常使用

在tsconfig.json文件的include属性中添加

"auto-imports.d.ts"

自动引入element-plus图标

安装依赖

npm install unplugin-icons -D

在vite.config.ts中进行配置

引入依赖：
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

配置添加：

      AutoImport({
        resolvers: [
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          }),
        ],
      }),
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
        ],
      }),
      Icons({
        autoInstall: true,
      }),

使用方式

// 官方文档点击复制代码,使用<el-icon>包裹着，是官方的建议用法，防止异常报错
<el-icon><Plus /></el-icon>
// 需要修改为，注意加qi前缀:i-ep
<el-icon><i-ep-plus /></el-icon>

自定义图标

创建文件夹assets/icons/svg，用来存放svg。创建一个assets/icons/index.ts，用来返回所有图标的名字，写入如下内容：

const icons = import.meta.glob('./svg/*.svg')

let iconNames: Array<string> = []
Object.keys(icons).forEach((key) => {
  const name = key.replace(/\.\/svg\/(.*)\.svg/, '$1')
  iconNames.push(name)
})
export default iconNames

安装依赖

npm install vite-plugin-svg-icons -D

vite.config.ts中进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: {
          // 移除svg默认颜色
          plugins: [
            {
              name: 'removeAttrs',
              params: { attrs: ['class', 'data-name', 'fill', 'stroke'] }
            }
          ]
        }
      })
    ],

创建一个icon组件components/SvgIcon/index.vue

<template>
  <svg aria-hidden="true" class="svg-icon" :class="className">
    <use :href="symbolId" />
  </svg>
</template>
<script setup lang="ts">
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  }
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
  outline: none;
}
</style>

在main.ts引入并注册为全局组件

import SvgIcon from './components/SvgIcon/index.vue'
import 'virtual:svg-icons-register'

createApp(App).component('svg-icon', SvgIcon)

使用自定义组件

<svg-icon class="menu-icon" name="svg文件名" />

.menu-icon {
      font-size: 30px;
      color: rgb(93, 249, 148);
}