今日はフロントエンドのコーディング進めました。時々上手く進まず問題の解決に時間かかったりもしましたが、少しずつフロントエンドの設計とかコードの書き方のイメージが固まってきたので、スキル上げれてる手応えがあります。 毎日コツコツが大事ですね。以下今日勉強したことのメモです。
Vue CLI ver4ではvuetifyがインストールできない?
Vue CLIにvuetifyをインストールしようとvue add vuetifyコマンドを実行したところ、なぜか以下のエラーが出ました。
ERROR Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
いろいろググってみたところ、こちらも記事を見つけて読んでみたところ、Vue CLI 3でvuetifyが動かないというような記述がありました。 qiita.com
Vue CLIのバージョンがvuetifyインストールできない原因とは思いつけていなかったので、とりあえず今の自分の環境で使ってるVue CLIのバージョン確認したところ4系でした。
記事ではVue CLI 3がvuetify動かないということでしたが、とりあえず一つずつバージョン変えて試そうと考え、バージョンを3系に変えてみたところ、想定通りにvuetifyをインストールできてトップのUIがvuetifyのものに変わっていました。
自分の環境がごちゃごちゃしているのかも知れないので、ちゃんとした原因はわかりませんが、少なくともVue CLI 4系でインストールできなかったvuetifyをVue CLI 3系にすることでインストールできました。
Vue CLI 3系をに指定してインストールするコマンドは以下を使いました。
npm install -g @vue/clie@3.5.0
もう少し正確にトラブルシューティングできたら良いのですが、まあ一つ一つの問題の調査に時間使いすぎると自分の開発が進まないので、一応動いたから良いかな。
今までVue CLIのバージョンは全然気にしてなかったので最新の4系を使ってましたが、とりあえず3系で開発するようにしてみます。
vuetifyのv-spacerが便利
vuetifyを無事インストールできたので公式ドキュメント見ながらコード書いてみました。 いろいろな便利コンポーネントが用意されてて使いやすいです。
v-spacerというタグも使いやすい印象です。 vuetifyjs.com
The v-spacer component is useful when you want to fill available space or make space between two components. コンポーネントの間にスペースを置きたい時に重宝しそうです。
