vue3+vite 项目常用插件介绍_vite 中 好用的插件

1、unplugin-auto-import、unplugin-vue-components

• unplugin-auto-import：按需自动导入 Vite、Webpack、Rspack、Rollup 和 esbuild 的 API。即无需在每个 vue 文件中手动导入 vue 相关函数：ref、reactive、computed 等等，就可使用。
• unplugin-vue-components：Vue 的按需组件自动导入。即不需要使用 import xx from 'xxx.vue' 语句也能实现导入效果。（包括项目自身的组件和各种组件库中的组件）

比如用到了 element-plus：

安装：

npm i unplugin-auto-import -D
npm i unplugin-vue-components -D

 使用配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// 引入ElementPlus组件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // presets
        'vue',
        'vue-router'
      ],
      resolvers: [
        ElementPlusResolver({ importStyle: false }),
      ],
      dts: './auto-imports.d.ts',
      eslintrc: {
        enabled: true, // Default `false`
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true,
      },
    }),
    Components({
      resolvers: [
        ElementPlusResolver({ importStyle: false }),
      ],
    }),
  ],
})

2、unplugin-icons

ElementUI 中内置的图标库是字体图标，ElementPlus是SVG图标。

unplugin-icons 插件可以做到自定义图标和组件库中图标使用一致。

安装：

npm i -D unplugin-icons

使用配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// 引入ElementPlus组件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入Icon图标
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // presets
        'vue',
        'vue-router',      ],
      resolvers: [ElementPlusResolver({ importStyle: false })],
      dts: './auto-imports.d.ts',
    }),
    Components({
      resolvers: [
        // 组件自动导入
        ElementPlusResolver({ importStyle: false }),
        // 自动注册图标组件
        IconsResolver({
          // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
          prefix: 'icon',
          // 指定collection，即指定为elementplus图标集ep
          enabledCollections: ['ep']
        })
      ],
    }),
    Icons({ compiler: 'vue3', autoInstall: true }),
  ]
})

注意：

使用组件解析器IconsResolver时，必须遵循名称转换才能正确推断图标，格式如下:

{prefix}-{collection}-{icon}
/* 用法 */
<el-icon><icon-ep-female /></el-icon>

• prefix是之前配置中设定的 ，自定义图标前缀。默认情况下，前缀设置为 i。

• collection是 Iconify的图标集ID

• icon即为该图标集中某个图标的name