【Vue.js Devtoolsの導入】簡単なSPAのサンプルを参考に作って?みたが・・・

何事も1回ではうまくいかない。

環境設定が終わり、とりあえず・・・ドットインストールのVue講座うけとく?

と基本となるものを勉強してみた。

そして、次は・・・Laravel + VueのSPAのサンプルで慣れてみる?とやってみた。

参考: Laravel5.6とVue.jsで簡単なシングルページアプリケーション - Qiita


webukatu.com

コピペ

まずは「習うより慣れろ」ってことでコピペしてみたわけで。

動いてからひとつひとつの機能を確認しつつ変更したいなぁと思っているわけですが。

Laravel Mix インストール

ここで

$ npm install

としてつまづきます。

なんと出てきたメッセージが

$ npm: command not found

なんですと!!!

npmが入ってないらしいです。案外、何も入っていないものだと思うものです。

一昨日はMySQLが入ってなかったわけで。

そう、npmはですね、いろいろ検索してみたのですが、ダウンロードしちゃえばいいんでしょ?的に。

nodejs.org

参考:npm command not found と出てきた時の解決方法 - Qiita

まぁとりあえず、

$ npm -v
6.9.0

ってことなので、再度

$ npm install

まぁ順調に進みましたので割愛。

コピペ終了!

$ npm run dev

一応、成功したって通知が表示されるのだけど(必要なメッセージほどすぐに消える)再表示しても何も表示されない。

Console見たらエラー出てるし。

f:id:kisokoji:20190530194200p:plain:w600

did you register the component correctly? For recursive components, make sure to provide the "name" option.

って・・・何?

Google先生曰く

コンポーネントを正しく登録しましたか?再帰的なコンポーネントの場合は、必ず "name"オプションを指定してください。

どこのこと〜!!!

下の方に何やらヒント的なものが。

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

とりあえず、Vue.js Devtoolsを機能追加してみた。

Chromeのバージョンアップでいろいろと変わるのか?

chrome.google.com

f:id:kisokoji:20190530194723p:plain:w100

をポチする。だけでも駄目で。

拡張機能設定が必要らしい。

で、どこよ?って感じなんだけど、私の場合、ブラウザの右上に追加したアイコンが並んでてその「Vue」を右クリックすると

f:id:kisokoji:20190530195116p:plain:w400

こんな感じでメニューが出てくるから「拡張機能を管理」をクリックして

f:id:kisokoji:20190530195218p:plain:w700

これをオンにしなきゃいけないらしい。

まぁこれはただ「機能拡張」であって、今出ているエラーが解消するわけではない。

f:id:kisokoji:20190530195350p:plain:w500

「Vue」のタブが追加されてました〜!!!

エラーの数は同じでーす。

このタブの使い方を勉強しなきゃ意味がないということだけ今わかってます。

webukatu.com