単一ファイルコンポーネントの読み込みを行いたい

Question

前提・実現したいこと

単一ファイルコンポーネントの読み込みを行いたいです。

発生している問題・エラーメッセージ

VueCLIをインストールし、プロジェクトを作成しました。
その後、LikeHeader.vue及び、LikeNumber.vueを「components」フォルダ内に作成しました。
現状のままですと、http://localhost:8080/にアクセスを行なっても何も表示されない状態です。
理由は分からないのですが、App.vue内のscriptタグを削除すると、LikeNumberの表示はされる状況です。
以下は、App.vueのscriptタグを削除した際に表示された画面です。

---

該当のソースコード

こちらはmain.jsファイルです。

import Vue from 'vue'
import App from './App.vue'
import LikeNumber from './components/LikeNumber'


Vue.config.productionTip = false
Vue.component('LikeNumber',LikeNumber)

new Vue({
  render: h => h(App),
}).$mount('#app')

下記は、App.vueファイルです。

<template>
	<div>
		<LikeHeader></LikeHeader>
		<LikeNumber></LikeNumber>
	</div>
</template>

<script>
import LikeHeader from './components/LikeHeader.vue';

export default {
	components:{
		LikeHeader:LikeHeader
	}
};

</script>

こちらは、LikeNumber.Vueです

<template>
<div>
  <p>いいね({{ number }})</p>
  <button @click="increment"> +1</button>
</div>

</template>

<script>

export default {
  data(){
    return {
      number:5
    }
  },
  methods:{
    increment(){
      this.number += 1;
    }
  }
}
</script>

こちらは、LikeHeader.vueはなります。

<template>
    <h1>いいね</h1>
</template>

補足情報（FW/ツールのバージョンなど）

OSは、Mac OS、エディターは「VScode」を使用しています。

どなたか、ご助言の程頂けましたら幸いです。

Answer 1

App.vueのscriptタグ内のimportの箇所のファイル名の部分から、LIkeHeaderと.vue拡張子を削除したら、読み込まれました。
しかし、原因は依然分からない状態の為、こちらの原因が分かる方がいましたら教えて貰えましたら幸いです。