unplugin-auto-import 和 unplugin-vue-components
unplugin-auto-import 和 unplugin-vue-components
2022年11月24日 18:15 · 阅读 1780
本文正在参加「金石计划 . 瓜分6万现金大奖」
背景
unplugin-auto-import:为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。
unplugin-vue-components:Vue 的按需组件自动导入。
这两个插件都是涉及到按需自动导入,所以我们在使用 Vue 和其对应的 组件之类时,都可能会需要这两个插件的帮助,帮助我们实现按需自动导入,避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。
但是,在项目中使用 unplugin-auto-import 和 unplugin-vue-components 总会遇到的一些问题,在此特意汇总如下,以及提供最后的解决办法,希望帮助到有需要的人。
安装
首先就是安装,为啥推荐使用 pnpm ,在此就不赘述了(可自行去了解)。
1 | pnpm add -D unplugin-auto-import |
vite 版本
修改 vite.config.ts 文件内容,在此以 ElementPlusResolver 为例,其他组件类同。
1 | import AutoImport from 'unplugin-auto-import/vite' |
问题1:自动导入的依然 eslint 报错
现象:使用过程中会自动引入 Vue 相关组合 Api,是起作用的,但是 eslint 却报错,让人很不舒服。
分析:起作用表示导入是正常可以用的,那么就是 eslint 的问题。但是怎么解决呢?是不是半天苦苦无果?
解决办法:
在刚才的 vite.config.ts 文件中修改:
1 | AutoImport({ |
eslintrc 中 enabled 设置为 true,保存之后会随即在跟目录下生成 .eslintrc-auto-import.json 文件。
1 | { |
然后将这个文件引入 .eslintrc.cjs
1 | extends: [ |
到此,该问题就完美解决了。
问题2: 自动生成的 components.d.ts 文件内容有报错
解决办法:
修改 .d.ts 文件生成目录
1 | Components({ |
到此该问题也就 完美解决了。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Lee Blog!