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

Question

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

如何以烤串风格名称在视图中使用自定义组件，仿照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单页代码规范实现带有“-”的组件名称呢？

Answer 1

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