自动引入插件unplugin-vue-components,unplugin-auto-import,unplugin-icons

这篇咱记录下做自动引入的unplugin系列插件：

unplugin系列github topics 地址： github.com/topics/unpl…

• unplugin-auto-import：自动按需引入js、ts
• unplugin-vue-components：自动按需引入组件
• unplugin-icons：自动按需引入icon

插件github链接：

• unplugin-auto-import：github.com/unplugin/un…
• unplugin-vue-components: github.com/unplugin/un…
• unplugin-icons: github.com/unplugin/un…

学习视频:

www.bilibili.com/video/BV1ty…

一、unplugin-auto-import

unplugin-auto-import能按需自动导入 Vite、Webpack、Rspack、Rollup 和 esbuild 的 API。 例如：它可以自动导入你在代码中使用的 Vue Composition API 函数，如 ref, reactive, computed 等。

有以下包：

1、安装：

yarn add unplugin-auto-import -S -D

2、配置基本库

在vite.config.ts文件中配置基础库使用imports:

// 项目用的vite则引入vite文件，webapck则引入webpack
import AutoImport from "unplugin-auto-import/vite"; 

export default defineConfig({
  plugins: [
    // 插件配置
    AutoImport({
      // auto-import内置vue、vue-router、pinia、react这些常见基本库的引入规则
      imports: ["vue", "vue-router"],
    }),
  ],
  
});

使用：在组件中不需要再手动引入ref、computed等api，直接使用即可。

例如：Home.vue

<script setup lang="ts">
// import { ref } from "vue";
// import { useRouter, useRoute } from "vue-router";
console.log("useRouter, useRoute ", useRouter, useRoute);
const msg = ref("aaa"); 
</script>

3、配置本地目录

在vite.config.ts文件中配置本地目录自动引入使用dirs：

// 项目用的vite则引入vite文件，webapck则引入webpack
import AutoImport from "unplugin-auto-import/vite"; 

export default defineConfig({
  plugins: [
    // 插件配置
    AutoImport({
      imports: ["vue", "vue-router"], // auto-import内置vue、vue-router、pinia、react这些常见基本库的引入规则
      dirs: ["./src/utils/**"], // utils下的所有文件都支持自动引入
    }),
  ],
  
});

使用：在组件中不需要再手动引入utils中的函数，直接使用即可。

例如：

utils/index.ts:

export const f1 = () => {
  console.log("f1");
};

Home.vue:

<script setup lang="ts">
// import { f1 } from "utils/index";
console.log("f1", f1());
</script>

4、配置第三方库

在vite.config.ts文件中配置第三方库也是在imports中，用对象的形式表示

// 项目用的vite则引入vite文件，webapck则引入webpack
import AutoImport from "unplugin-auto-import/vite"; 

export default defineConfig({
  plugins: [
    // 插件配置
    AutoImport({
      // auto-import内置vue、vue-router、pinia、react这些常见基本库的引入规则
      imports: [
        "vue",
        "vue-router",
        {
          // 配置第三方库lodash
          lodash: [
            "cloneDeep", // 相当于 import {cloneDeep} from 'lodash'
            ["compact", "cp"], // compact重命名为cp,相当于 import {compact as cp} from 'lodash'
          ],
          // 配置第三方库axios
           axios: [
            ["default", "axios"], // 相当于 import {default as axios} from 'lodash',相当于 import axios from 'lodash'
          ]
        },
      ],
    }),
  ],
  
});

使用：在组件中不需要再手动引入cloneDeep、cp、axios等api，直接使用即可。

例如：Home.vue

<script setup lang="ts">
// import { cloneDeep, compact as cp } from "lodash-es";
// import axios from "axios";
console.log("cloneDeep", cloneDeep, cp);
console.log("axios", axios);
</script>

5、匹配对应的文件

在vite.config.ts文件中配置include:

// 项目用的vite则引入vite文件，webapck则引入webpack
import AutoImport from "unplugin-auto-import/vite"; 

export default defineConfig({
  plugins: [
    // 插件配置
    AutoImport({
      // auto-import内置vue、vue-router、pinia、react这些常见基本库的引入规则
      imports: ["vue", "vue-router"],
    }),
  ],
  
});

二、unplugin-vue-components

unplugin-vue-components是专门用来实现按需引入vue组件的。

1、配置组件库组件

在vite.config.ts文件中配置组件库使用resolvers:

// 项目用的vite则引入vite文件，webapck则引入webpack
import Components from "unplugin-vue-components/vite"; 
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // 引入对应组件库的resolver

export default defineConfig({
  plugins: [
    // vue-components内置前端几乎所有主流组建的resolve，例如element、vant
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  
});

使用：在组件中不需要再手动引入el组件，直接使用即可。

例如：Home.vue

<script setup lang="ts">
// import { cloneDeep, compact as cp } from "lodash-es";
// import axios from "axios";
console.log("cloneDeep", cloneDeep, cp);
console.log("axios", axios);
</script>

2、配置自定义组件

在vite.config.ts文件中配置自定义组件使用dirs:

// 项目用的vite则引入vite文件，webapck则引入webpack
import Components from "unplugin-vue-components/vite"; 
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // 引入对应组件库的resolver

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
      dirs: ["./src/components/**"], // 自动引入'./src/components/'中的所有组件
    }),
  ],
});

使用：在组件中不需要再手动引入./src/components/文件夹下的组件，直接使用即可。

例如：Home.vue

<script setup lang="ts">
// import Child from "../components/Child.vue";
</script>
<template>
  <Child :msg="msg" :age="11" />
</template>

3、配置自定义组件库

• 自定义组件库：myui
• 组件库需要暴露出一个resolver,像ElementPlusResolver一样使用，或者直接在vite.config.ts文件中配置：

const myResolver = (componentName) => {
    // componentName为接收到的组件名，例如myButton
    if(componentName.indexOf('my')!==-1) {
        // 引入规则
        // 相当于
        // import {myButton} from 'myui
        // import 'myui/myButton/style/index.css'
        return {
            name: componentName, // 组件名
            from:'myui', // 自定义组件库名
            sideEffects: 'myui/' + componentName +'/style/index.css' // 引入当前组件的样式
        }
    }
}

三、unplugin-icon

unplugin-vue-components是专门用来实现按需引入图标的。

1、安装插件

安装：npm install -D unplugin-icons

2、安装图标集

由于unplugin-icons基于iconify图标,iconify图标中包含很多图标集，所以可以选择安装所有图标集，也可以指定安装图标集。

• 手动安装所有图标集：npm i -D @iconify/json

• 手动安装指定图标集：npm i -D @iconify-json/XXX

  例如，要安装 Material Design 图标: npm i -D @iconify-json/mdi

• 自动安装图标集：在vite.config.ts文件中配置autoInstall 属性为 true

// icon 插件
import Icons from "unplugin-icons/vite"
 
export default defineConfig({
    plugins:[
       Icons({
            compiler: 'vue3',// 指定编译器
            autoInstall: true,// 自动安装
        })
    ]
)}

3、配置图标库

由于图标是外部引入的组件。所以需要搭配unplugin-vue-component

在vite.config.ts文件中配置组件库使用resolvers:

import Components from "unplugin-vue-components/vite"; 
import IconResolver from "unplugin-icons/resolvers"; // 引入对应组件库的resolver

export default defineConfig({
  plugins: [
    // vue-components内置前端几乎所有主流组建的resolve，例如element、vant
    Components({
      resolvers: [IconResolver({
          // 自动引入的Icon组件统一前缀，默认为icon，设置false为不需要前缀
          prefix: 'icon',
      )],
    }),
  ]
});

使用：

2、配置自定义图标

src/assets/svg中创建自定义图标文件夹： login、user

在IconsResolver（Icon自动引入解析器）中使用customCollections 属性标记出自定义的图标集模块名:

import Components from "unplugin-vue-components/vite"; 
import IconResolver from "unplugin-icons/resolvers"; // 引入对应组件库的resolver

export default defineConfig({
  plugins: [
    // vue-components内置前端几乎所有主流组建的resolve，例如element、vant
    Components({
      resolvers: [IconResolver({
          // 自动引入的Icon组件统一前缀，默认为icon，设置false为不需要前缀
          prefix: 'icon',
          // 标识自定义图标集
          customCollections: ['login', 'user']
      )],
    }),
  ]
});

使用：

<template>
    <IconLoginFrame />
</template>