摆脱手动依赖引入，自动引入依赖

刀刀

4/8/2025

0 字

0 分钟

学习明灯
• UP主：三十的前端课，视频地址：前往学习

学习目标

1. unplugin-vue-components 和 unplugin-auto-import 基本使用
2. 透彻运用 unplugin-vue-components 和 unplugin-auto-import 来自动引入各种内容

基本使用

unplugin-auto-import

项目中的 JavaScript 模块可以用 unplugin-auto-import 来自动引入。

1. 项目本地编写的一些具方法自动引入
2. 一些第三方库的自动引入

在 vite.config.js 文件中引入，配置插件。

import AutoImport from "unplugin-auto-import/vite";

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

插件内置了 Vue 的规则，所以可以直接写。后续文件中无需手动引入 ref 等模块，可直接使用。

如果是想用自己封装的函数方法，需要做如下配置：

import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // auto-import内置vue、vue-router、react这些常见基本库的引入规则
        "vue",
      ],
      // 配置那些本地目录，支持自动引入
      dirs: ["./src/utils/**"],
    }),
  ],
});

如果想要自动引入第三方库如 axios 、loadsh 等，没有内置支持的，则需要自己编写规则。

import AutoImport from "unplugin-auto-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        "vue",
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            "concat",
          ],
        },
      ],
      // 配置那些本地目录，支持自动引入
      dirs: ["./src/utils/**"],
    }),
  ],
});

上方配置本质上是通过 import {concat} from 'loadsh' 引入的，因此可以设置别名。

import AutoImport from "unplugin-auto-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            "concat",
            ["compact", "cp"],
          ],
        },
      ],
    }),
  ],
});

这么修改它就会设置上别名，本质上是 import {compact as cp} from 'loadsh' 。

像 axios 这种全部导入默认部分的，实际上导入的是 default ，因此可以通过设置别名的方式自动引入。

import AutoImport from "unplugin-auto-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        {
          // 放自定义的自动引入库
          loadsh: [
            // 哪些方法能自动引入
            "concat",
            ["compact", "cp"],
          ],
          axios: [["default", "axios"]],
        },
      ],
    }),
  ],
});

最终编译出来的效果等价于 import axios from 'axios' 。

unplugin-vue-components

Vue 项目组件 unplugin-auto-import 虽可用来自动引入，但很多 Vue 项目组件是用 .vue 文件编写，unpluin-auto-import 做不到自动引入，所以有这么一个专门为 Vue 准备的自动引入库。而 React 纯粹的就是 JavaScript ，所以 React 可以直接使用 unplugin-auto-import 。

1. 如何引入自动本地组件
2. 自己开发的组件库如何做到自动支持自动引入

同样的，需要先去 vite.config.js 文件，做相关配置，以 element-plus 举例。

import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

本地组件也想要实现自动引入，和 unplugin-auto 一样通过 dirs 配置。

import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [ElementPlusResolver()],
      // 存放组件的文件夹
      dirs: ["./src/components"],
    }),
  ],
});

如果想要自定义 resolver 来支持自主开发的组件库，则需要配置一个方法，该方法可接收所使用的组件名称。判断名称是否是自主开发的组件（有固定的命名），符合条件 return 一个对象。该对象主要属性为：

• Name：组件名称
• from：来源文件夹路径
• style：样式文件路径

import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
      resolvers: [
        ElementPlusResolver(),
        (componentName) => {
          if (componentName.indexOf("My") != -1) {
            // 引入规则
            return {
              name: componentName,
              from: "myui",
              sideEffects: "myui/" + componentName + "/style/index.css",
            };
          }
        },
      ],
      // 存放组件的文件夹
      dirs: ["./src/components"],
    }),
  ],
});

后续编译后等价于引入组件和样式文件。

import { MyButton } from "myui";
import "myui/MyButton/style/index.css";

拓展

若想要了解如何开发自己的组件库，指路跳转：组件库搭建 。