Vue3 + Vuetify3

Vue2が2023/12/31でEOLを迎えるのでそろそろVue3も勉強しないとなと思いつつも放置していたが、そろそろ触らないといけない機会が増えてきそう。 Vuetify3も正式リリースされているので、環境をまずは構築する。

環境の構築

Node.jsのインストール

Node.js 18.16.LTSをインストールする
https://nodejs.org/ja

インストールはどんどんNextで進めてOK。以下の画面が出たらチェックを付けずにNextを押して進める。

チェックを入れた場合は「Chocolatey」を言うものがインストールされる。
利用したことがないので詳しく分からないが、コマンドラインからアプリケーションの追加削除ができて、開発環境の構築が楽にできるらしい。

Node.jsのインストールが完了したら、コマンドプロンプトを起動してNode.jsが起動するか確認する。インストールしたNode.jsのバージョンが表示されたらOK。

Vuetify3の環境を構築する

Get started with Vuetify 3
https://vuetifyjs.com/en/getting-started/installation/

コマンドプロンプトを開いて開発を始めたいフォルダに移動します。

途中選択肢が出てきますので、作成したいプロジェクトに合わせて選択してください。今回は以下を選択しました。

Project name: >> vuetify-project
Which preset would you like to install? >> Default (Vuetify)
Use TypeScript? » No / Yes >> No
Would you like to install dependencies with yarn, npm, or pnpm? >> yarn

プロジェクトの作成が完了すると現在のフォルダに先程指定したプロジェクト名のフォルダができています。

プロジェクトを実行して画面を表示してみる

コマンドプロンプトを開いて先ほど作成したプロジェクトのフォルダへ移動してyarn runを実行しプロジェクトで作成された初期状態で起動してみる。

内臓のwebサーバが起動してhttp://localhost:3000/でアクセスできる状態になっているのでブラウザにアドレスを入力する

アドレスを入力すると以下の画面が表示される(右の方にvuetifyの表示が寄っているのは仕様なのか…)

ソースコードを確認すると見たことがないv-responsiveというのがあり、これが原因っぽい。

デベロッパーツールで確認してみると確かに原因のようだが、ドキュメントを見てもよくわからない。
Aspect ratios
https://vuetifyjs.com/en/components/aspect-ratios/#aspect-ratios:embed

環境の構築はできたので簡単なプログラム書いて勉強をしてみる。

vscodeでデバッグする

vscodeでctrl + shift + dを押してデバッグメニューを出して歯車を押してlunch.jsonができたら、以下の内容を設定する。
index.htmlファイルにはブレイクポイントをつけられないが、*.vueファイルにはブレイクポイントを設定することができる。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
        }
    ]
}

デバッグのやり方

ターミナルを開いてyarn run devを入力してサーバーを起動する
起動した時に出てきたlocal: http://localhost:3000/とlunch.jsonのurlの記載が同一であることを確認(異なる場合はlunch.jsonのurlを変更する)
任意の場所にブレイクポイントを設定する
ctrl + shift + dでデバッグメニューを開いて「localhost に対して Chrome を起動する」が選択されていることを確認してF5でデバッグを実行
ブラウザが起動するのでブレイクポイントを設定した部分のコードが実行されるとブレイクポイントが有効になりデバッグができる