Vue 3 工程化：用 unplugin 自动导入 API 与组件，砍掉 import 噪声

import 噪声是怎么堆积的

每个 Vue 组件顶部都写 ref、computed、onMounted，每个 UI 组件再写一遍 import。VueUse、Element Plus 这类库更是重灾区，一个文件顶部能堆十几行 import。unplugin 系列能在编译期自动补上这些导入，源码里直接写名字即可，编译产物与手写 import 完全一致。

装两个插件

npm i -D unplugin-auto-import unplugin-vue-components

在 Vite 里配置

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

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-imports.d.ts",
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: "src/components.d.ts",
    }),
  ],
});

组件里去掉 import

配置完成后下面这段代码不需要手写任何 import 就能跑，ref、useRoute 自动可用，el-button 按文件按需引入。

<script setup lang="ts">
const count = ref(0);
const doubled = computed(() => count.value * 2);
const route = useRoute();

onMounted(() => {
  console.log(route.path);
});
</script>

<template>
  <el-button @click="count++">{{ doubled }}</el-button>
</template>

类型安全不能丢

dts 选项会生成类型声明文件，ref、useRoute 等自动拥有类型提示，TS 不会报未定义。团队成员 clone 后首次运行由插件自动生成，无需手动维护。

小结

• AutoImport 管 API（vue、router、pinia 以及第三方 composable）。
• Components 管组件（按文件名或 resolver 做按需引入）。
• 生成 dts 之后，类型提示与手写 import 完全一致，不牺牲类型安全。