前言

在我们写vue项目的时候，都会引入一些组件库，有时候有可能还不止一个组件库，这样会使我们的项目打包之后特别庞大，再或者在组件内使用大量的import引入所使用的组件，让其打包之后的项目不那么庞大，不论哪一种对开发者都不太友好。 接下来分享几个插件，让组件中使用较少的import或者不使用import就能按需引入组件供我们使用

unplugin-vue-components： 自动按需因引入组件 vite-plugin-style-import：自动引入样式 unplugin-auto-import：自动引入api unplugin-icons：自动引入图标

安装的话应该都会 ：

//直接npm i 梭哈
npm i unplugin-vue-components unplugin-auto-import vite-plugin-style-import unplugin-icons

unplugin-vue-components

安装完成之后，在vite.confing.ts引入即可，在这里使用的element-plus组件库

  vite.confing.ts 
  
import Components from "unplugin-vue-components/vite";
//引入饿了么的组件，只要安装的ep,这里就会有提示的
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
  plugins: [
  //...
    Components({
      dts: "./src/components.d.ts",//创建ts文件
      extensions:['vue'],//指定文件的后缀
      dirs: ["src/components/"],//指定路径，自动导入自定义组件
      resolvers: [ElementPlusResolver()],//指定自动引入的组件库，也就是从插件中导出的那个
    }),
   ],
});

这样简单的配置就完成了，这个时候我们在组件里面就可以为所欲为的使用组件了

app.vue

<template>
  <div>
    <el-button @click="btn">点击</el-button>
    <!-- 在插件内，指定的路径下，也可以直接使用自定义组件 -->
    <HelloWorld/>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus'
const btn = () => {
  ElMessage.error("iceCode");
};
</script>

vite-plugin-style-import

当然有时候，不是所有的组件都自带样式的，就例如antdv中的message提示组件，这个是需要单独引入样式的 这里就可以使用vite-plugin-style-import来对样式的自动导入了

 vite.confing.ts
 
import { createStyleImportPlugin, AndDesignVueResolve} from "vite-plugin-style-import";
//2.0之前
//import styleImport { AndDesignVueResolve} from "vite-plugin-style-import";
export default defineConfig({
  plugins: [
  //...
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve()],//这里引入
    }),
     //下面这种写法使在这个插件2.0之前的写法
    // styleImport( {
    //   libs: [
    //     {
    //       libraryName: "ant-design-vue",
    //       esModule: true,
    //       resolveStyle: (name: string) => {
    //         return `ant-design-vue/dist/antd.css`;
    //       },
    //     },
    //   ],
    // })
   ],
});

这个时候我们再使用antdv的message组件无需引入样式也可以正常展示了

app.vue

<template>
  <div>
    <Button @click="btn">点击</Button>
  </div>
</template>

<script setup lang="ts">
import { Button, message } from "ant-design-vue";
const btn = () => {
  message.success("iceCode");
};
</script>

有时候我们使用这个插件的时候会出现找不到consola的报错 这个时候只需要npm i consola 一下这个插件就可以解决了

unplugin-auto-import

在vue3选项式中，我们需要大量使用import引入vue的api，unplugin-auto-import可以使我们在写vue的时候不用再引入ref，reactive等api了，减少了我们频繁写import的次数

vite.confing.ts

import AutoImport from "unplugin-auto-import/vite"; //引入组件
export default defineConfig({
  plugins: [
   ///...
   AutoImport({
      imports: ["vue", "vue-router", "pinia", "@vueuse/core"],//这里是自动引入api的项目
      dts: "./src/auto-imports.d.ts",//在这创建.d.ts文件
      resolvers: [ ElementPlusResolver()],//组件中的api也是可以自动引入的，比如message是需要单独引入的
    }),
   ],
});

这样，我们再在vue3中进行一些操作的时候就无需再引入api了

app.vue

<script setup lang="ts">
const num = ref<number>(0);
const newNum = computed<number>( () => num.value + 1 );
interface n{
  n:number
}
const numObj = reactive<n>({
  n: newNum.value,
});
console.log(toRaw(numObj));
</script>

unplugin-icons

如果项目中需要大量引入图标的时候，又不想手动引入，就可以使用unplugin-icons来进行自动引入，配合Element-plus组件库使用还需要额外安装另外一个插件@iconify-json/ep才可以使用，否则会找不到

//首先安装一下这个插件 在vite文件夹中就不用管了
npm i @iconify-json/ep

vite.confing.ts
//自动引入图标需要搭配自动引入组件的插件来用
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolve from "unplugin-icons/resolver";
export default defineConfig({
  plugins: [
  //...
    Components({
      dts: "./src/components.d.ts",//创建ts文件
      extensions:['vue'],//指定文件的后缀
      dirs: ["src/components/"],//指定路径，自动导入自定义组件
      resolvers: [IconsResolve()],//图标组件
      
     // { enabledCollections: ['ep'], }，有的会在IconsResolve()中传入这个参数，但我测试不传也是可以的
    }),
      Icons({
      //使用哪种框架解析
      compiler: "vue3",
      //是否自动安装
      autoInstall: true,
    }),
   ],
});

使用的时候也是有点特殊

<template>
  <div>
  <!-- 这是饿了么组件的icon使用，需要加上i-ep- 才能正常使用 -->
    <i-ep-user/>
  </div>
</template>

这个自动引入icon的插件，如果不是项目中需要大量使用图标，也不太推荐使用，使用的地方不太多，加入这个插件之后，会使打包的体积变大

整体代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import Icons from "unplugin-icons/vite";
import IconsResolve from "unplugin-icons/resolver";
import { AntDesignVueResolver, ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { createStyleImportPlugin, AndDesignVueResolve, ElementPlusResolve } from "vite-plugin-style-import";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //自动引入api
    AutoImport({
      imports: ["vue", "vue-router", "pinia", "@vueuse/core"],
      dts: "./src/auto-imports.d.ts",
      resolvers: [AntDesignVueResolver(), ElementPlusResolver()],
    } ),
    //自动引入组件
    Components({
      dts: "./src/components.d.ts",
      extensions: ["vue"],
      dirs: ["src/components/"],
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
        ElementPlusResolver(),
        IconsResolve(),
      ],
    } ),
    // 自动引入样式
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve(), ElementPlusResolve()],
    } ),
    //自动引入icon
    Icons({
      //使用哪种框架解析
      compiler: "vue3",
      //是否自动安装
      autoInstall: true,
    }),
  ],
});

结尾

在自动引入组件和自动引入api中会发现有一个创建ts文件的属性，如果是使用的ts项目，务必要写，因为会使ts报错，默认情况下这两个插件会在根目录下创建好.d.ts文件，但是我们的项目文件都在src目录下，即使根目录下有着ts文件，却访问不到，这里就是主动在src目录下添加对应的.d.ts文件，防止自动引入之后ts不知道，给我们报错！

另外在使用antdv组件库的时候，自动引入api的插件的ts文件中并没有引入，所以在vue文件中不引入message这类组件直接写的话还是会报错，我不太清楚为什么，有没有大佬讲解一下