vue3自动导入ref、reactive等

开发vue3项目时，我们使用的ref,reactive.watch等，只要用到就需要再页面中先引用才能使用，比如下面的代码

import { ref } from 'vue'
const showDialog = ref(false)

这样每个页面都需要引入，比较麻烦，所以我们可以自动导入这些API，不必要在每个页面都要引用，这里用到一个自动引入的插件unplugin-auto-import

安装

npm i unplugin-auto-import

配置vite.config.js

// vite.config.js 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),AutoImport({
    imports:['vue'],
    dts:"src/auto-import.d.ts"   //  会自动生成此文件
  })]
})

但是如果你项目中有使用到eslint，在页面中使用ref，reactive时会报错提示ref is not defined,需要安装一个插件vue-global-api来解决此问题

安装vue-global-api

npm i vue-global-api

在eslintrc.js中添加以下代码

// eslintrc.js
module.exports = {
extends: 
    [ 'vue-global-api' ]
}

在main.ts中引入vue-global-api

// main.ts

import 'vue-global-api'

再次回到页面代码，发现不报错了