Vue3 自动引入 api 插件 unplugin-auto-import

插件地址：https://github.com/antfu/unplugin-auto-import 

安装：

npm i -D unplugin-auto-import

以 vite 配置为例使用：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'

import AutoImport from 'unplugin-auto-import/vite' //引入 unplugin-auto-import 插件

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    VueJsx(),
    AutoImport({
      imports:['vue'], // 注入 vue
      dts:"src/auto-import.d.ts" // 生成声明文件
    })
  ]
})

以上配置完成后重启，就可以无需 import 导入，直接使用 ref、watch、reactive、computed 等 api 了。

如下示例，直接 使用 ref ，无需 import 导入：

<script setup lang="ts">
  const valText=ref<string>('测试')
</script>

<template>
  <div>{{ valText }}</div>
</template>