Vue3组合API自动引入插件

插件名：unplugin-auto-import

url：https://github.com/antfu/unplugin-auto-import

安装

1、下载插件

npm i unplugin-auto-import -D

2、配置vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// 引入插件，因为我使用的vite+ts，所以这里引入的是vite
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    // 配置插件
    AutoImport({
      // 全局注册
      imports: ['vue', 'vue-router'],
      // 配置声明文件的生成位置，就写在src下面，
      // 因为tscofig.ts里配置的就是从src下开始找声明文件
      dts: 'src/auto-imports.d.ts'
    })
  ],
  ...
})

3、使用

直接在vue中使用这些组合API即可，不需要再手动引入，
如下图，直接使用ref并没有报错提醒

浏览器中也能正常显示