自动引入神器unplugin-auto-import，和满屏的import说拜拜

目录

• 简介
• 功能
• 安装
• 在 Vite 中使用
• 在 Webpack 中使用
• 配置选项

简介

unplugin-auto-import 是一个现代的自动导入插件，它支持多种构建工具（例如 Vite 和 Webpack），可以根据你在代码中使用的标识符自动生成相应的 import 语句，从而减少重复代码，简化开发过程。

官方仓库

功能

• 自动导入常用库的 API，如 vue、vue-router、@vueuse/core 等。
• 支持自定义目录中的函数自动导入。
• 生成类型声明文件（适用于 TypeScript）。
• 生成 ESLint 配置文件，避免未定义变量错误。

安装

可以使用 npm 或 yarn 安装 unplugin-auto-import。

# npm
npm install unplugin-auto-import

# yarn
yarn add unplugin-auto-import

在 Vite 中使用

1. 安装插件
   安装 unplugin-auto-import 插件：

npm install unplugin-auto-import

2. 配置插件
   在 vite.config.ts 文件中添加 unplugin-auto-import 配置：

// vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router", "@vueuse/core"],
      dirs: ["./src/composables", "./src/utils"],
      dts: "./src/auto-imports.d.ts",
      eslintrc: {
        enabled: true,
        filepath: "./.eslintrc-auto-import.json",
        globalsPropValue: true,
      },
    }),
  ],
});

3. 示例代码
   配置后，你可以直接在组件中使用 vue、vue-router 等库的 API，而无需手动 import：

<!-- src/components/ExampleComponent.vue -->

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update</button>
</template>

<script setup>
const message = ref("Hello, Vite!");
const updateMessage = () => {
  message.value = "Updated Message!";
};
</script>

在 Webpack 中使用

1. 安装插件
   安装 unplugin-auto-import 和 @unplugin/webpack：

npm install unplugin-auto-import @unplugin/webpack

2. 配置插件
   在 webpack.config.js 中配置 unplugin-auto-import 插件：

// webpack.config.js

const AutoImport = require("unplugin-auto-import/webpack");
const path = require("path");

module.exports = {
  // 其他配置
  plugins: [
    AutoImport({
      imports: ["vue", "vue-router", "@vueuse/core"],
      dirs: [
        path.resolve(__dirname, "./src/composables"),
        path.resolve(__dirname, "./src/utils"),
      ],
      dts: path.resolve(__dirname, "./src/auto-imports.d.ts"),
      eslintrc: {
        enabled: true,
        filepath: path.resolve(__dirname, "./.eslintrc-auto-import.json"),
        globalsPropValue: true,
      },
    }),
  ],
};

3. 示例代码
   在使用了自动导入功能后，你可以在组件中直接使用 API：

// src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

配置选项

unplugin-auto-import 提供了丰富的配置选项：

• **imports**: 自动导入的库列表。
• **dirs**: 自动导入的目录列表。
• **dts**: 生成的类型声明文件路径。
• **eslintrc**: 生成的 ESLint 配置文件选项。

示例配置

AutoImport({
  imports: ["vue", "vue-router", "@vueuse/core"],
  dirs: ["./src/composables", "./src/utils"],
  dts: "./src/auto-imports.d.ts",
  eslintrc: {
    enabled: true,
    filepath: "./.eslintrc-auto-import.json",
    globalsPropValue: true,
  },
});

• imports: 你希望自动导入的库，如 vue、vue-router、@vueuse/core 等。
• dirs: 包含你项目中自定义模块的目录。
• dts: 如果你使用 TypeScript，这会生成一个 .d.ts 文件，用于自动导入的类型声明。
• eslintrc: 配置 ESLint，避免因自动导入导致的未定义变量错误。

结论

通过 unplugin-auto-import，你可以显著简化项目中的 import 管理，提升开发效率。无论是 Vite 还是 Webpack，配置都十分简单并且灵活，可以根据具体需求进行定制。