前言
每次写 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 的配置并且重启项目才好的。