vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程

是否还在为每次都需要导入框架方法而烦恼呢？

// 每次都需手动导入框架方法
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',// 项目中集成了 unplugin-vue-router 时，此处需用 VueRouterAutoImports 替换掉 'vue-router'VueRouterAutoImports]})],

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