vue-routerの子ページでのimportの書き方

Question

Vue.js + vue-router + Webpack4の環境シングルページアプリケーションを勉強しています。

vue-routerのページの中から自作したVueコンポーネントを呼び出そうとしていますが、コンポーネントの部分だけが表示されません。
コンソールに

Unknown custom element: <input-base> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

というワーニングが出ているので、コンポーネントをインポートしているところが失敗しているのでは？と思っているのですが、インポートのパスを色々変えてみても改善されません。
この場合、importパスはどの位置からのパスを記載すればいいのでしょうか。
もしくは全然関係ないことが原因なのでしょうか。。。

フォルダ階層

pages\input.vue(赤枠）からcomponents_input_base.vue（青枠）をインポートしようとしています。

該当ソース

■input.vue

<template>
  <div class="content_wrapper">
    <h2>INPUT</h2>
    <p>
      インプットベースの表示テスト　<!-- ここは表示される -->
      <input-base></input-base>　<!-- こっちは表示されない -->
    </p>
  </div>
</tempkate>
<script>
  import InputBase from '../components/_input_base';

  Vue.component(InputBase.name, InputBase);
  export default{
    data:function(){
		},
    // components:{
    //   "input-base" : InputBase,
    // },
  }
</script>

■_input_base.vue

<template>
  <span class="input-group">
     表示テスト
  </span>
</template>

<script>
  export default{
    'name': 'input-base',
  }
</script>

■_router.js

// import routes from 'vue-auto-routing'
import Vue from 'vue';
import VueRouter from 'vue-router';
// ページのインポート
import InputPage from './pages/input';

Vue.use(VueRouter);

const Home = {template: '<span></span>'}
export default new VueRouter({
  routes:[
    {path: '/', component:Home},
    {path: '/input', component:InputPage}
  ]
});

試したこと

■importパスを変えてみる

以下パターンを試してみましたが、ダメでした。
毎回忘れずwebpackでバンドル→ブラウザのキャッシュをクリアして試しました。

  // import InputBase from 'src/js/components/_input_base';
  // import InputBase from './src/js/components/_input_base';
  // import InputBase from '/js/components/_input_base';
  // import InputBase from './js/components/_input_base';
  // import InputBase from './components/_input_base';
  // import InputBase from '/components/_input_base';
  // import InputBase from './_input_base';
  // import InputBase from '/_input_base';
  // import InputBase from '../_input_base';
  import InputBase from '../components/_input_base';

■ _router.jsでcomponents_input_baseを読み込んでみる

import Vue from 'vue';
import VueRouter from 'vue-router';
// ページのインポート
// import InputPage from './pages/input';
import InputPage from './components/_input_base'; // ☆こっちにしてみる


Vue.use(VueRouter);

const Home = {template: '<span></span>'}
export default new VueRouter({
  routes:[
    {path: '/', component:Home},
    {path: '/input', component:InputPage}
  ]
});

→　コンポーネントが表示されました。

■ コンポーネントに名前を付けてみる

ワーニングで検索してこの記事(stackoverflow)にたどり着いたのですが、なんで解決したのかが理解できませんでした。
途中に「You also need to have same name while you export」とあったのでコンポーネントに名前を付けてみましたが変わりませんでした。

<script>
  export default{
    'name': 'input-base', // ここ
    data:function(){
			return {
				method_name:this.id+"_selected"
			}
		},
  }
</script>

環境

webpack：4.17.1
vue : 2.5.17
vue-router: 3.0.1
vue-loader: 15.4.0
vue-template-compiler: 2.5.17

Answer 1

大変申し訳ありません・・・私のスペルミスでした。

input.vue

<template>
  <div class="content_wrapper">
    <h2>INPUT</h2>
    <p>
      インプットベースの表示テスト　<!-- ここは表示される -->
      <input-base></input-base>　<!-- こっちは表示されない -->
    </p>
  </div>
</tempkate> // ←ここ

これのせいでテンプレートが閉じられないまま<script>に突入し、
最初に書かれていたimport文がちゃんと認識してもらえなかったようです。

import文は

  import InputBase from '../components/_input_base';

でちゃんと読み込めました。

コンポーネントの読込については、

  // Vue.component(InputBase.name, InputBase); ←これだと実行時にエラーになる
  export default{
    data:function(){
		},
    // ↓こっちだとOK!
    components:{
      InputBase,
    },
  }

となりました。
ここはt_shinoharaさんにご回答いただいて気づけました。

そもそもimportのパスが間違ってたら、webpackでバンドルした時にエラーになるの知りました。
エラーにならなかった時点で、構文として認識されてないというのに気付くべきでした。。。
お勉強になりました。

Answer 2

input.vueのソースのscriptの箇所を以下のように直してみてはいかがでしょうか

  import input-base from '../components/_input_base';

  // Vue.component(InputBase.name, InputBase);
  export default{
    data:function(){
    },
    components:{
      input-base
    }
  }

Comments

[SystemAjisai]

回答ありがとうございました。
私のスペルミスでテンプレートタグが閉じられず、scriptの先頭にあったimport文だけ認識してもらえなかったようです。。。
残念なスペルミスを修正した後、ご指摘いただいた通り試してみたのですが、import文の名前？（fromの前のところ）に「-」が入るとエラーになってしまいました。
でも回答いただけたおかげで「パスはあってるってことか！」と気が付けて、調査の方向を変えることができました。
コンポーネントの読込は、Vue.componentではエラーになってしまい、ご回答いただいた方法に修正しました。
ありがとうございました！