vue3自动引入(unplugin-auto-import)

原创已于 2023-06-28 10:02:18 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-06-27 14:34:53 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何使用unplugin-auto-import插件简化Vue3项目中的API导入步骤，通过安装和配置该插件，可以直接使用ref,reactive等无需手动import。同时，对于使用了eslint的项目，文章提供了相应的配置以消除未引入API的报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

每次写 vue3 文件时都要从 vue 中引入一些API，有点麻烦，可以通过 unplugin-auto-import 插件来省略引入过程。

import {ref, reactive} from 'vue'

安装

npm i -D unplugin-auto-import

配置

vite.config.ts文件中

import autoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    autoImport({
      imports: ['vue'], // 需要引入的类型来源
      dts: 'src/types/auto-import.d.ts' // 根据引入来源自动生成的类型声明文件路径
    })
  ]
})

此时已经可以不引用直接使用 vue 的 API了

Eslint

如果你的项目中使用了 eslint，那么虽然可以正常使用 API 了，但是 eslint 还是会报没有引入的报错，可以通过如下配置解决：
1、vite.config.ts文件中

import autoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    autoImport({
      imports: ['vue'], // 需要引入的类型来源
      dts: 'src/types/auto-import.d.ts', // 根据引入来源自动生成的类型声明文件路径
      eslintrc: {
        enabled: true // 使用 eslint 配置
      }
    })
  ]
})

在上面配置中加上 eslint 的配置项后，会在项目中生成一个名为.eslintrc-auto-import.json的文件；
2、.eslintrc.cjs文件中

module.exports = {
  root: true,
  extends: [
    './.eslintrc-auto-import.json'
  ],
}

引入了刚刚生成的 json 文件后，eslint 就不会再报 API 未引入的错误了。

注意

写配置时最好分步执行，就是先配置好 import API 的配置，在页面上尝试可以正常使用 ref 了，再来解决 eslint 报错的问题。刚刚自己写新项目时，直接把配置一起写了，发现 eslint 还是报错，于是删除 eslint 的配置并且重启项目才好的。

链接

unplugin-auto-import 配置说明