Unknown custom element: <componentName> - did you register the component correct?

最近开发的时候遇见一个头疼的事情，之前用过的组件没有出现过任何问题，但偏偏在其他目录下引用就出问题了。

组件的名称、import的路径都没任何问题，看了其他人遇到的问题和官方文档关于组件name属性的规范之后，这是因为组件name填写不规范所导致的！

在命名组件时必须要按照官方文档给出的规范来

1、使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

2、使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时使用 <my-component-name> 或 <MyComponentName> 都是可接受的。