unplugin-auto-import 插件的用法

AutoImport插件可以自动导入Vue的API，如ref、reactive、computed等，无需手动导入。

仓库地址：https://github.com/unplugin/unplugin-auto-import

1. 安装

npm i -D unplugin-auto-import

2. 配置Vite

vite.config.js中添加如下配置：

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

export default defineConfig({
  plugins: [
    AutoImport({ 
      imports: [
        // 导入Vue的API: ref, computed, onMounted等
        'vue',
        // 导入路由的API和组件: useRouter, useRoute, RouterLink, RouterView等
        'vue-router'
      ]
      // 其他配置可参考官网
    })
  ]
})

当项目启动时，插件自动在项目根目录下创建auto-imports.d.ts文件，用于声明导入的API。

3. 代码应用

在Vue组件中，可以直接使用ref、computed等Vue的API，无需手动导入：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
const count = ref(0)
</script>