vue3不用再写一堆import啦

做过vue3项目的同学都知道，项目中使用vue3 ref、reactive、onMounted等等都需要引入，引入这些东西并没有实际意义，能不能有插件帮我们自动引入呢？

一、插件安装

pnpm i  unplugin-auto-import --save-dev

二、配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
    plugins:[
        vue(),
        AutoImport({
            dts:'./auto-imports.d.ts',    // 项目根目录生成auto-imports.d.ts配置文件
            imports:["vue","vue-router","pinia"....],    // 设置自动导入的模块/插件
        })
    ],
});

到此重启项目，就无需在页面中导入配置的的包或组件了。

三、注意

未引入组件，如有报错，显示xxx undefined. 修改tsconfig.ts，这样当前项目能够利用这一描述文件进行资源的查找操作，而不会产生无法找到自动导入的函数模块内容。

# tsconfig.ts

 "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./auto-import.d.ts",  // 添加auto文件路径
  ],