unplugin-vue-components解决命名冲突问题

更新时间：2024年03月21日 14:59:48 作者：菜鸟茜

这篇文章主要介绍了unplugin-vue-components解决命名冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

unplugin-vue-components命名冲突问题

我们在vue项目中通常会利用unplugin-vue-components插件进行自定义组件的自动引入

注：

如果不知道怎么配置unplugin-vue-components插件，欢迎看我整理的这篇：

vue3项目配置按需自动引入自定义组件unplugin-vue-components

当出现同名文件时，怎么解决？

非常简单，只需要多一项属性配置directoryAsNamespace为true即可
在引用时，需要增加路径名作为前缀，以components下的路径为起点

将会自动生成components.d.ts文件

当新增vue文件时，components.d.ts会自动生成相应的声明，但是，当你修改或者删除文件，人家可就不负责修改或删除文件对应的记录了，原有记录依旧会被保留。

如果不想生成components.d.ts文件，需要设置属性【dts】为【false】，

注：vue+ts项目，dts属性默认为true，因此在你不留意时，它就自动生成啦。

具体怎么用，只需要记住2点

1.同名加路径前缀，不同名也要加路径前缀
2.多级目录，就加多级路径前缀

下图这个例子：

我用不同颜色区分了同名、不同名和多级目录这几种情况，看一下，你应该就理解啦

大概就是这样啦，至于到底要不要设置directoryAsNamespace为true，就看你个人习惯啦~

false时，就要多花点脑细胞想名字
true时，就需要引用时多敲点代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue操作数组的几种常用方法小结
本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
2023-09-09
在vue.js中使用JSZip实现在前端解压文件的方法
今天小编就为大家分享一篇在vue.js中使用JSZip实现在前端解压文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3.js自定义组件 v-model详解
在Vue3 中,v-model是用于创建双向数据绑定的指令,通常,我们使用该指令将任何 HTML 表单元素与一个变量绑定以收集输入值,本文给大家介绍Vue3.js自定义组件 v-model,感兴趣的朋友一起看看吧
2023-10-10
浅谈Vue插槽实现原理
vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结，在某些场景中，有一定的用处
2021-06-06
vuex中的四个map方法的使用小结
vuex里面有四个map方法，他们分别可以针对不同的元素进行不同的代码生成，本文就来详细的介绍一下vuex中的四个map方法，具有一定的参考价值，感兴趣的可以了解一下
2023-05-05
Element-UI 10个技巧小结
本文主要介绍了Element-UI 10个技巧小结，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
VUE项目中封装Echart折线图的方法
这篇文章主要为大家详细介绍了VUE项目中封装Echart折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue中的事件触发(emit)及监听(on)问题
这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue封装远程下拉框组件的实现示例
本文主要介绍了Vue封装远程下拉框组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果
这篇文章主要介绍了vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09