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单页代码规范实现带有“-”的组件名称呢?

已自行解决,尝试了一下,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调用

你import用驼峰啊 然后components里面也用驼峰 然后就能用你说的那种烤串

你可以这样尝试一下

<el-button>测试按钮</el-button>

import elButton from "@/components/elButton"

components:{elButton}