vue+ts实现自动导入ref、reactive等常用api

使用vue+ts开发的时候，很多页面都需要导入ref、reactive、onMounted等api，每次都手动导入会很麻烦。

有一个插件正好解决了我们的顾虑，那就是unplugin-auto-import，只需要简单的配置，就不再需要每次手动导入了

使用npm安装

npm i -D unplugin-auto-import

其中-D是--save-dev的简写，表示在开发环境中安装。

配置

在vite.config.ts中进行配置插件

import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    vue(),
    ....
     AutoImport ({
      imports: ["vue", "vue-router","pinia"], //自动引入vue的ref等api
      resolvers:[ElementPlusResolver()]
    })
  ]
})

ts语法检查还是报错

原因：ts未识别到自动导入

解决方法：在vite中生成auto-imports.d.ts文件，并在ts的配置文件中引入

1. 在vite.config.ts配置

   plugins: [
       vue(),
       AutoImport({
         // 自动导入vue相关函数，如ref，reactive 
         imports: ['vue'],
         dts: "./auto-imports.d.ts",//表示在当前目录生成auto-imports.d.ts文件
       }),
     ],
   

2. 在tsconfig.json或tsconfig.app.json中添加

   在其中有include配置项的文件中，添加这个引入即可

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