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时,就需要引用时多敲点代码

总结

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

相关文章

  • 一文带你搞懂Vue3.5的响应式重构

    一文带你搞懂Vue3.5的响应式重构

    在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%,本文我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和依赖触发的,感兴趣的可以了解下
    2024-11-11
  • vue实现动态路由的方法及路由原理解析

    vue实现动态路由的方法及路由原理解析

    这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API,可以轻松地实现路由功能,并支持路由参数、查询参数、命名路由、嵌套路由等功能,可以满足不同应用程序的需求,需要的朋友可以参考下
    2023-06-06
  • vue项目做屏幕自适应处理方式

    vue项目做屏幕自适应处理方式

    这篇文章主要介绍了vue项目做屏幕自适应处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 基于vue-router的matched实现面包屑功能

    基于vue-router的matched实现面包屑功能

    本文主要介绍了基于vue-router的matched实现面包屑功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue组件style中scoped的作用及说明

    vue组件style中scoped的作用及说明

    这篇文章主要介绍了vue组件style中scoped的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • MVVM模型在Vue中的使用详解

    MVVM模型在Vue中的使用详解

    MVVM模型主要是为了分离视图(View)和模型(Model),其优点为:低耦合、可重用性、独立开发以及可测试,视图和模型分离的特点给了 Vue 很大的启发,这篇文章主要介绍了MVVM模型在Vue中的使用,需要的朋友可以参考下
    2022-11-11
  • vue v-model的详细讲解(推荐!)

    vue v-model的详细讲解(推荐!)

    vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue中使用js-doc的案例代码

    vue中使用js-doc的案例代码

    这篇文章主要介绍了vue中使用js-doc的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue用复选框实现组件且支持单选和多选操作方式

    vue用复选框实现组件且支持单选和多选操作方式

    这篇文章主要介绍了vue用复选框实现组件且支持单选和多选操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue项目添加多页面配置的步骤详解

    vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置。这篇文章主要介绍了vue项目添加多页面配置,需要的朋友可以参考下
    2019-05-05

最新评论