0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue run serve でエラーが起きたので解決しました。

Posted at

結論

簡潔に言うとキャメルケースを使用せずにコンポーネントに名前をつけたから。ということがわかりました。

理由

キャメルケースを使用せずにコンポーネントに名前を付けたり、水平線で単語をつなぎ合わせたりすると、コンパイル時に常にエラーが報告されます。これは実際には文法検出の問題であり、非標準コードは文法チェック中にエラーと見なされます。文法の基準が異なるため、エラーが報告されることがよくあります。
以下でエラー内容を記載しています。

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できました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?