unplugin-auto-import按需引入后报ts错误处理

unplugin-auto-import作用

让API自动导入，无需import { ref } from 'vue'效果展示如下：

<script lang="ts" setup>
// import { ref } from 'vue' // ref属于vue的api，无需单独引入
const name = ref('') 
</script>

实现步骤

1. 依赖下载 npm i unplugin-auto-import -D

2. 在vite.config.ts配置

import AutoImport from 'unplugin-auto-import/vite'
plugins: [
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        dts: './auto-imports.d.ts'
      })
     ]

3.到这步即可在vue文件中直接使用vue的api，但发现会报ts错误。是因为未做eslint和ts检测，需添加配置

3.1.在vite.config.ts配置eslintrc，首先修改enabled为true，会根据filepath配置的路径生成一个.eslintrc-auto-import.json 文件，文件生成后即可改为false

plugins: [
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        dts: './auto-imports.d.ts',
        eslintrc: {
          enabled: false,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true
        }
      }),
     ]

3.2.在.eslintrc.cjs文件中extends配置中加入

extends: ['./.eslintrc-auto-import.json']

3.3.在tsconfig.json文件中include配置中加入

"include": ["./auto-imports.d.ts"]

3.4.配置保存后即可发现已无ts报错提醒