插件地址: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>