unplugin-vue-components解决命名冲突

这篇具有很好参考价值的文章主要介绍了unplugin-vue-components解决命名冲突。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

当出现同名文件时,该怎么解决呢?

非常简单,只需要多一项属性配置directoryAsNamespace为true即可

在引用时,需要增加路径名作为前缀,以components下的路径为起点

unplugin-vue-components解决命名冲突,VUE,前端,antfu,自动引入

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

unplugin-vue-components解决命名冲突,VUE,前端,antfu,自动引入

当新增vue文件时,components.d.ts会自动生成相应的声明,但是,当你修改或者删除文件,人家可就不负责修改或删除文件对应的记录了,原有记录依旧会被保留。unplugin-vue-components解决命名冲突,VUE,前端,antfu,自动引入

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

unplugin-vue-components解决命名冲突,VUE,前端,antfu,自动引入

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

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

1同名加路径前缀,不同名也要加路径前缀

2多级目录,就加多级路径前缀

下图这个例子,我用不同颜色区分了同名不同名多级目录这几种情况,看一下,你应该就理解啦

unplugin-vue-components解决命名冲突,VUE,前端,antfu,自动引入

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

false时,就要多花点脑细胞想名字

true时,就需要引用时多敲点代码

如果有任何,欢迎友友们评论区留言……文章来源地址https://www.toymoban.com/news/detail-830912.html

到了这里,关于unplugin-vue-components解决命名冲突的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+vite配置 unplugin-vue-component 找不到 Vant 组件的问题

    使用 vue3 + vite + Vant 搭建移动端项目,为了避免全量引入 vant 导致打包体积过大,又不想一个一个组件手动导入,所以就选择了 vant 官方推荐的方法,使用 unplugin-vue-components 插件自动引入组件,并按需引入组件的样式。 但是运行过程中遇到了报错: [vite] Internal server error: F

    2024年02月16日
    浏览(47)
  • 【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案

    【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案 解决方案 1.1 直接改名 1.2 关闭检验 1.3 关闭命名规则校验 1.4 建议官方的配置 1. 报错代码 使用脚手架创建一个新的项目后,在给组件下的文件取名为index.vue后,第一行飘红,提示信息如下:

    2024年02月16日
    浏览(39)
  • vue name命名错误 Do not use built-in or reserved HTML elements as component

    描述: Do not use built-in or reserved HTML elements as component id: header 这里指的是components的名称命名不正确。 在项目中我使用的是header 作为组件名称,但是在前端html中这个是内置组件来的,名称已被占用不能再使用这些名称了。 解决方法: 把命名修改一下,避免名称冲突就好了。

    2024年02月14日
    浏览(55)
  • eslint报错Component name “home“ should always be multi-word,文件命名规则导致问题解决方案

    新建vue项目的时候,往往需要配置eslint进行代码的格式化,但使用过程中也是会遇到各种问题,就比如:Component name “Home” should always be multi-word.eslintvue/multi-word-component-names 其实这是eslint对命名的校验,要以 多词组件名称 命名,防止与现有和未来的 HTML 元素发生冲突。 如何

    2024年02月12日
    浏览(55)
  • 客户端LocalStorage命名冲突问题(二)

    问题背景: 我们的前端项目客户端存储采用localStorage,恰好在同一个域下部署了2个前端项(a和b)目,判断用户是否登录的信息都用token字段存储在localStorage中。当我们打开项目a登录后存储了token,然后非正常退出(关掉浏览器窗口或者标签页),然后在打开项目b,问题就出

    2023年04月13日
    浏览(30)
  • Vue:多组件样式冲突问题解决

    我们在开发 Vue 项目的时候,会有很多的组件,每个组件里,可能都会写相应的样式,这时候就会出现在父组件引入子组件的时候,同名样式会冲突的问题。从而导致样式出问题。 给 style 标签加上 scoped 属性即可 加上 scoped 之后,这个样式只会作用在当前组件的 html 模板上。

    2024年02月02日
    浏览(40)
  • vue项目编译报错Component name “My“ should always be multi-word vue/multi-word-component-names解决方法

    以下是报错内容,大概意思是你的组件命名不符合vue的规范   具体报错内容: 解决方法: 找到vue.config.js文件,在末尾加入这一行代码 lintOnSave: false即可,意思大概是关闭组件名字的检查  

    2024年02月11日
    浏览(50)
  • 关于Vue3警告:Failed to resolve component:XXX的解决办法

    今天做小项目的时候遇到的问题,上网参考了几个大佬给出的解决方法 没有注册组件,注册即可 检查一下组件的名称有没有拼错or大小写有问题 将vue3中的defineComponent去掉 可能是你引用的组件互相嵌套,你中有我,我中有你,此时建议 1、把组件注册成全局组件 2、使用 web

    2024年02月06日
    浏览(46)
  • 在idea中shift+f6不可以重命名,快捷键冲突

    这种问题一般都是出现在win11用户的电脑上,在idea重命名快捷键中,发现不可以用,可能是因为idea本身的快捷键冲突,不过这种问题很少出现,另一种方式就是win11的系统更新后,电脑开始用新的输入法,然后引发的快捷键冲突问题,现在我来带大家修改一下 首先,先看一下

    2024年02月04日
    浏览(52)
  • error Component name “index“ should always be multi-word vue/multi-word-component-names 的解决办法

    在创建组件命名时,引用 index.vue 的过程中报错; 其一、报错的全称为: error Component name \\\"index\\\" should always be multi-word vue/multi-word-component-names 翻译为: 错误组件名称“索引”应始终为多词 vue/多词组件名称 其二、问题分析: 新手在使用脚手架时总会报各种错,报错信息指的是

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包