はじめに

プログラミングを始めて2ヶ月ぐらいの初心者です。
備忘録としてVue.jsとVuetifyの環境構築方法を残しておきます。

Vuetifyとは

Googleが提唱するマテリアルデザインに基づいたVue.js用のUIコンポーネントライブラリです。
Vuetifyを使用することでCSSを弄らなくてもいい感じに見た目を整えることができます。

環境構築手順

前提としてnpmやvue-cliはインストールされているものとします。

まずはプロジェクトを作成。
質問形式で設定を聞かれるので必要に合わせて変更。

vue create プロジェクト名

プロジェクトのフォルダに移動しVuetifyを追加。

cd プロジェクト名
vue add vuetify

これでVueとVuetifyの環境が整いました。
サーバーを起動しブラウザで http://localhost:8080/ にアクセスして確認してみましょう。

npm run serve

以下のような画面が表示されたら成功です。

【個人的メモ】
フル画面のスクリーンショットの撮り方は以下のサイトを参考にしました。
https://requlog.com/self-branding/blog/chrome-full-screen-capture/
Macの場合Google Chromeで以下の通り操作します。
①⌘+option+I
②⌘+shift+P
③「full」で検索し「Capture full size screenshot」が出てきたらEnter