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',
        '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