Vite 自动导入与组件命名配置实战

Vite 开发体验优化：自动导入与组件命名

在使用 Vite 构建 Vue 项目时，我们常会遇到两个痛点：一是手动导入 API 和 Composables 代码冗余，二是 <script setup> 语法下组件名称在调试工具中不可见。通过引入合适的插件，可以显著简化开发流程。

1. 实现 API 自动导入

为了减少重复的 import 语句，推荐使用 unplugin-auto-import。它能自动识别并注入常用的 Vue API 及第三方库方法。

首先安装依赖：

npm install unplugin-auto-import -D

接着在 vite.config.js（或 .ts）中添加配置。这一步很关键，否则插件不会生效：

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    // 其他插件...
    AutoImport({
      imports: ['vue'],
      dts: true, // 生成类型声明文件
    }),
  ],
})

配置完成后，你在模板或脚本中直接使用 ref、computed 等函数即可，无需手动导入。

2. 为 Setup 标签定义组件名

默认情况下，Vue 3 的 <script setup> 无法获取组件名称，这给调试带来不便。我们可以使用 vite-plugin-vue-setup-extend 来恢复这一功能。

安装插件：

npm install vite-plugin-vue-setup-extend -D

同样需要在 vite.config.js 中启用它：

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    // ...其他插件
    vueSetupExtend(),
  ],
})

现在，你可以在 <script> 标签上直接添加 name 属性了：

<  =>