为轮子而生 2022-01-05 14:23 采纳率: 33.3%
浏览 33
已结题

vue-cli中如何以烤串风格为组件命名?

问题遇到的现象和发生背景

如何以烤串风格名称在视图中使用自定义组件,仿照ElementUI的那种命名方式,如 el-button

问题相关代码,请勿粘贴截图

例如有形如components/user-tip的自定义组件,使用如下风格会违反eslint语法规范:

import user-tip from "@/components/user-tip"

因而不能像这样在视图中调用:

<user-tip></user-tip>
运行结果及报错内容
'import ... =' can only be used in TypeScript files.
我的解答思路和尝试过的方法

怀疑ElementUI是通过类似批处理的方式将所有组件统一使用Vue.Component()的方式批量注册了组件:

Vue.Component(`el-${name}`, `${code}`)

那么在vue-cli中如何在vue单页代码中实现呢?

我想要达到的结果

有没有官方的解决方案,不使用Vue.Component方式,按照vue单页代码规范实现带有“-”的组件名称呢?

  • 写回答

3条回答 默认 最新

  • 为轮子而生 2022-01-05 14:47
    关注

    已自行解决,尝试了一下,js部分仍采用大/小驼峰命名法:

    import userTip from "@/components/user-tip"
    // 或 UserTip
    

    视图中如果按以下名称调用,都会自动识别,效果都是一样的:

    <userTip></userTip>
    <UserTip></UserTip>
    <user-tip></user-tip>
    <user-Tip></user-Tip>
    <User-Tip></User-Tip>
    

    vue-cli对各种场景的明明风格都有兼容以及互转,比如在组件的props里定义'user-id',就可以在视图中以:user-id="user.id"去使用它,而在js中则通过this.userId调用

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月13日
  • 已采纳回答 1月5日
  • 修改了问题 1月5日
  • 创建了问题 1月5日

悬赏问题

  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥15 使用LM2596制作降压电路,一个能运行,一个不能
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路
  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题