背景
vue3 项目 为了省略 第三方库ui 组件 全局组件的注册代码,使用了 unplugin-vue-components 插件
原理
-
组件识别
在编译阶段,unplugin-vue-components 会扫描 Vue 单文件组件(.vue 文件)的模板部分,识别出所有使用的组件标签。这些标签可能是来自 UI 组件库(如 Ant Design Vue、Element Plus 等)的组件,也可能是项目内部自定义的组件。 -
组件解析
对于识别出的每个组件标签,unplugin-vue-components 会使用一个或多个解析器(resolver)来找到对应的组件实现。解析器可以是内置的(针对主流 UI 组件库),也可以是自定义的(针对项目内部的组件)。解析器会返回一个对象,包含组件的名称、路径和可能的副作用(如样式文件)。 -
自动引入
基于解析器提供的信息,unplugin-vue-components 会自动在编译后的 JavaScript 文件中插入 import 语句
注意
业务开发 普通的局部组件 ,unplugin-vue-components 开发环境使用时 要是忘记引入,插件会优先使用缓存的帮你注入。但是打包的时候 就会报错,无法识别该组件。
解决
我们要告诉插件 忽略某些组件的自动导入,保证开发在开发环境必须手动引入,这要就可以避免忘记引入导致 打包后出现问题。
例如,有如下组件目录结构:--component
----child-a.vue
----child-b.vue
----index.vue······
plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 第三方ui库resolvers: [ElementPlusResolver()],// 排除src/components目录下的组件// 一个排除,可以再写几个命中globs: ['src/components/*.vue','!src/components/ComponentA.vue',],}),],
这样
只会看到第三方库的内容