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

之前用过的组件没有出现过任何问题，但偏偏在其他目录下引用就出问题了。组件的名称、import的路径都没任何问题，发现这是因为组件name填写不规范所导致的。

在定义组件的时候我们要严格按照官方文档要求来做，官方文档给出了两种组件的命名方式，即kabab-case和PascalCase。

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>。