unplugin-auto-import 和 unplugin-vue-components

Posted 2023-04-05 梅花十三儿

背景

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

到此该问题也就 完美解决了。

最后

整理了一套《前端大厂面试宝典》，包含了html、CSS、javascript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

vue3的unplugin-auto-import自动引入

vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入

1、安装

npm i -D unplugin-auto-import

2、在vite.config.ts中引入

import AutoImport from 'unplugin-auto-import/vite'

并在plugins中配置：

export default defineConfig(

        plugins: [

            ......

            AutoImport(  

              imports: ['vue'],

              dts: 'src/auto-import.d.ts',

            )

        ]

）

AutoImport中可以有很多配置项，可以到github中看详细配置：

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

注：dts是帮我们生成的类型声明文件，直接使用会找不到

上面配置完毕后会在src目录下生成一个auto-import.d.ts文件，里面帮我们自动引入vue相关内容，我们可以在项目中直接使用。

注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可。

使用如下：

<script setup lang="ts">
  // 这里我们不用引入ref直接使用
  const msg = ref<string>('Hello Vue3')
</script>

<template>
   msg 
</template>

<style scoped lang="scss"></style>