結論
簡潔に言うとキャメルケースを使用せずにコンポーネントに名前をつけたから。ということがわかりました。
理由
キャメルケースを使用せずにコンポーネントに名前を付けたり、水平線で単語をつなぎ合わせたりすると、コンパイル時に常にエラーが報告されます。これは実際には文法検出の問題であり、非標準コードは文法チェック中にエラーと見なされます。文法の基準が異なるため、エラーが報告されることがよくあります。
以下でエラー内容を記載しています。
npm run serve
(base) hogeMacBook-Pro:'プロジェクト名' hoge$ npm run serve
> 'プロジェクト名'@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error
[eslint]
/Users/hoge/github/'プロジェクト名'/src/pages/Detail.vue
1:1 error Component name "Detail" should always be multi-word vue/multi-word-component-names
/Users/hoge/github/'プロジェクト名'/src/pages/Index.vue
1:1 error Component name "Index" should always be multi-word vue/multi-word-component-names
✖ 2 problems (2 errors, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
注: 文法チェック中はコンポーネント名を 1 語にすることはできないため、Index などの 1 語でもエラーが報告されます。
この回避方法以外にもeslintを編集する方法もあるようですが今回はこちらのみ記載しました。
回避策
コンポーネント名の変更
たとえば、現在のログイン コンポーネント名がIndex.vueに変更された場合、コンポーネント名はキャメルケースで少なくとも 2 語で名前を付けるIndexData.vueのようにする必要がありIndexData.vueにします。
App running at:
- Local: http://localhost:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
無事 npm run serveできました。