告别重复导入！Vite 7 + unplugin-auto-import 让 Vue 开发效率翻倍

概述

unplugin-auto-import 是一个强大的 Vite 插件，可以自动导入常用的 API，无需手动编写 import 语句。与 Vite 7 结合使用，可以显著提升开发效率。

安装

# 安装 unplugin-auto-import
npm install -D unplugin-auto-import

# 或者使用 yarn
yarn add -D unplugin-auto-import

# 或者使用 pnpm
pnpm add -D unplugin-auto-import

基础配置

vite.config.ts

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    AutoImport({
      // 自动导入 Vue 相关函数
      imports: ["vue", "vue-router", "pinia"],

      // 自动导入 Element Plus 组件
      resolvers: [ElementPlusResolver()],

      // 生成类型声明文件
      dts: true,

      // 自动导入目录下的模块
      dirs: ["./src/composables/**", "./src/stores/**", "./src/utils/**"],

      // 自动导入 Vue 模板中的组件
      vueTemplate: true,
    }),
  ],
});

常用配置选项

imports 配置

AutoImport({
  imports: [
    // Vue 3 组合式 API
    "vue",
    "vue-router",
    "pinia",

    // 工具库
    "@vueuse/core",
    "axios",

    // 自定义导入
    {
      "vue-router": [
        "useRouter",
        "useRoute",
        "createRouter",
        "createWebHistory",
      ],
      pinia: ["defineStore", "storeToRefs"],
    },
  ],
});

dirs 配置

AutoImport({
  dirs: [
    // 自动导入 composables 目录下的所有文件
    "./src/composables/**",

    // 自动导入 stores 目录下的所有文件
    "./src/stores/**",

    // 自动导入 utils 目录下的所有文件
    "./src/utils/**",

    // 排除特定文件
    "!./src/utils/legacy/**",
  ],
});

类型声明配置

AutoImport({
  // 生成类型声明文件
  dts: "./src/auto-imports.d.ts",

  // 或者禁用类型声明
  dts: false,

  // 自定义类型声明内容
  dts: {
    include: ["src/**/*.ts", "src/**/*.vue"],
    exclude: ["src/legacy/**"],
  },
});

实际使用示例

Vue 组件中使用

<template>
  <div>
    <el-button @click="handleClick">点击</el-button>
    <p>当前路由: {{ route.path }}</p>
    <p>计数器: {{ count }}</p>
  </div>
</template>

<script setup>
// 无需手动导入，自动可用
// ref, computed, onMounted 来自 'vue'
// useRoute 来自 'vue-router'
// useCounterStore 来自自定义 store

const count = ref(0);
const route = useRoute();
const counterStore = useCounterStore();

const handleClick = () => {
  count.value++;
  counterStore.increment();
};

onMounted(() => {
  console.log("组件已挂载");
});
</script>

自定义 Composable

// src/composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0);

  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => (count.value = 0);

  return {
    count: readonly(count),
    increment,
    decrement,
    reset,
  };
};

Pinia Store

// src/stores/counter.ts
export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);

  const increment = () => count.value++;
  const decrement = () => count.value--;

  return {
    count,
    increment,
    decrement,
  };
});

高级配置

ESLint 配置

// .eslintrc.js
module.exports = {
  extends: [
    // 添加 auto-import 的 ESLint 配置
    "./.eslintrc-auto-import.json",
  ],
};

TypeScript 配置

// tsconfig.json
{
  "compilerOptions": {
    "types": ["./src/auto-imports.d.ts"]
  }
}

条件导入

AutoImport({
  imports: [
    // 根据环境条件导入
    {
      vue: [
        "ref",
        "computed",
        "watch",
        // 开发环境额外导入
        ...(process.env.NODE_ENV === "development"
          ? ["onMounted", "onUnmounted"]
          : []),
      ],
    },
  ],
});

最佳实践

性能优化

AutoImport({
  // 只在开发环境生成类型声明
  dts: process.env.NODE_ENV === "development",

  // 缓存配置
  cache: true,

  // 排除不需要的文件
  exclude: ["**/node_modules/**", "**/dist/**", "**/build/**"],
});

团队协作

// 创建 auto-import.config.ts
export default {
  imports: ["vue", "vue-router", "pinia"],
  dirs: ["./src/composables/**", "./src/stores/**"],
  dts: true,
};

常见问题

类型错误

确保在 tsconfig.json 中包含生成的类型声明文件。

ESLint 报错

安装并配置 unplugin-auto-import/eslint 插件。

热更新问题

检查 cache 配置和文件监听设置。

总结

unplugin-auto-import 与 Vite 7 的结合使用可以：

• 减少重复的 import 语句
• 提升开发效率
• 保持代码整洁
• 提供完整的 TypeScript 支持

通过合理配置，可以让开发体验更加流畅，代码更加简洁易维护。