是否还在为每次都需要导入框架方法而烦恼呢？
// 每次都需手动导入框架方法 import { ref } from 'vue' let num = ref(0)
用 unplugin-auto-import 来帮你吧，以后只需这样写就行啦！
let num = ref(0)
官方示例如下图
使用流程
1. 安装 unplugin-auto-import
npm i -D unplugin-auto-import
2. vite 配置中导入
vite.config.ts
import AutoImport from 'unplugin-auto-import/vite' // 项目中集成了 unplugin-vue-router 时，此处导入VueRouterAutoImports 需用 代替 vue-router import { VueRouterAutoImports } from 'unplugin-vue-router'
plugins 中加入 AutoImport
plugins: [ // VueRouter 必须在 vue() 之前 VueRouter({}), Layouts({ layoutsDirs: 'src/layouts', // 指定布局文件的目录路径 defaultLayout: 'default' // 指定默认布局文件的名称 }), vue(), vueJsx(), vueDevTools(), AutoImport({ // 解析的文件类型 include: [ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.vue$/, /\.vue\?vue/, // .vue /\.md$/ // .md ], // 需自动导入方法的库 imports: [ 'vue', 'pinia', // 项目中集成了 unplugin-vue-router 时，此处需用 VueRouterAutoImports 替换掉 'vue-router' VueRouterAutoImports ] }) ],
- 若有其他想自动导入方法的库，在 imports 里添加即可
3. 添加 ts 相关配置
tsconfig.app.json 的 include 中添加 "auto-imports.d.ts" ,最终效果如下：
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
4. 重启 vscode
以便触发插件对相关文件的识别和解析
5. 重启项目
会重新生成 auto-imports.d.ts 文件（内部可见自动导入的框架方法）
通过下方代码测试效果：
<script setup lang="ts"> let num = ref(0) </script> <template> <div>{{ num }}</div> </template>
若页面正常渲染无报错，恭喜配置成功！
更多配置和用法见官网
https://www.npmjs.com/package/unplugin-auto-import
