unplugin-auto-import与unplugin-vue-components安装问题解析
背景
unplugin-auto-import：为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。
unplugin-vue-components：Vue 的按需组件自动导入。
这两个插件都是涉及到按需自动导入，所以我们在使用 Vue 和其对应的 组件之类时，都可能会需要这两个插件的帮助，帮助我们实现按需自动导入，避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。
但是，在项目中使用 unplugin-auto-import 和 unplugin-vue-components 总会遇到的一些问题，在此特意汇总如下，以及提供最后的解决办法，希望帮助到有需要的人。
安装
首先就是安装，为啥推荐使用 pnpm ，在此就不赘述了（可自行去了解）。
pnpm add -D unplugin-auto-import pnpm add -D unplugin-vue-components
vite 版本
修改 vite.config.ts 文件内容，在此以 ElementPlusResolver 为例，其他组件类同。
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
问题1：自动导入的依然 eslint 报错
现象：使用过程中会自动引入 Vue 相关组合 Api，是起作用的，但是 eslint 却报错，让人很不舒服。
分析：起作用表示导入是正常可以用的，那么就是 eslint 的问题。但是怎么解决呢？是不是半天苦苦无果？
解决办法：
在刚才的 vite.config.ts 文件中修改：
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [ElementPlusResolver()],
// 新增如下
dts: "src/auto-import.d.ts",
eslintrc: {
enabled: true
},
}),
eslintrc 中 enabled 设置为 true，保存之后会随即在跟目录下生成 .eslintrc-auto-import.json 文件。
{
"globals": {
"EffectScope": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeRouteLeave": true,
"onBeforeRouteUpdate": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"resolveDirective": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useLink": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true
}
}
然后将这个文件引入 .eslintrc.cjs
extends: [
// ...
'./.eslintrc-auto-import.json'
]
到此，该问题就完美解决了。
问题2: 自动生成的 components.d.ts 文件内容有报错
解决办法：
修改 .d.ts 文件生成目录
Components({
resolvers: [ElementPlusResolver()],
// 新增如下
dts: 'src/components.d.ts'
}),
到此该问题也就 完美解决了。
最后
希望大家如果遇到上述问题，可以在掘金里边搜到这里的解决办法，帮助到大家。
同时如果大家项目中遇到其他什么问题，也可以在一起讨论找解决办法，更多关于unplugin-auto-import unplugin-vue-components的资料请关注脚本之家其它相关文章！
相关文章
表格是前端非常常用的一个控件，本文主要为大家介绍了Vue3如何实现一个简易的可以复制的表格，文中的示例代码讲解详细，需要的可以参考一下2022-12-12
如何在 Vite 项目中自动为每个 Vue 文件导入 base.les
在Vite配置中通过添加css.preprocessorOptions实现自动导入base.less,简化Vue组件的样式设置,提高代码的可维护性,感兴趣的朋友跟随小编一起看看吧2024-09-09
element-ui form表单的动态rules校验功能实现
在vue项目中，有时候可能会用到element-ui form表单的动态rules校验，这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要为大家详细介绍了如何在Vue项目中使用flv.js播放视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要为大家介绍了Vue3 directive自定义指令内部实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue-cli如何修改打包项目结构及前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue实现百度搜索下拉提示功能实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了Vue 解决路由过渡动画抖动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论