やっほー
Vuetify画面

【Vue.js】Vuetifyのサンプルアプリを作成した件

  • 2020年1月25日
  • 2021年3月15日
  • Vue.js
  • 91view

Vue.jsでマテリアルデザインを使うとなると「Vuetify」一択かね?

ってことで、Vue.jsにVuetifyを導入してみました。

前提

  • Vue CLIのアプリが存在すること

Vuetify導入

Vueアプリのルートで上記コマンドを実行します。

 

↓実際はこんな感じになる。

Vuetify

導入は終わり。

だが、基本的にエラーが出るので解消していきます。

エラー解消方法

構文エラー解消

src/main.ts」にカンマがないので追加します。

「src/plugins/vuetify.ts」でわけわからんエラー出てる

@type/vuetify」ってのを入れろって言ってそうなので入れてみます。

 

404なので見つからないと言われている。
どうやらこの方法ではないらしい。

 

ググってみると「tsconfig.jsonのcompilerOptions.typesに”vuetify”を追加する」といいらしいです。ので追加してみた。
これで終わり。

Vuetify導入後の画面はこれや!

Vuetify画面

いい感じ。

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

まとめ

VueとかVuetifyってなんでデフォルトでエラー出るの?

意味わからん。

ではまた。

Vuetify画面
フォローしてもらえると泣いて喜びます