Laravel + Vue.js + DDDのすゝめ – Vueをインストールする

Vue.jsのバージョンはVue3(composition API)、CLIは最速で評判のVite、言語はTypeScriptで進めていきます。

連載

本記事は複数記事の連載記事の１つです。

wonwon eater

Laravel + Vue.js + DDDのすゝめ

https://wonwon-eater.com/laravel-vuejs-ddd-susume

この組み合わせは、いま最も選ばれやすい組み合わせではないでしょうか。この土台を作るだけでも選択肢や注意するべきポイントが沢山あって一苦労です。プログラマーならコードで語れ！というように、ボイラープレート（サンプルコード）を作りながら、説明記事を追記していこうと思います。リポジトリ随時、記事を書きながら更新しています。作りながら書いているので、解説サイトでは（忘れて）省略されるようなトラブルも拾っていきたいと思います。GitHub yoshida-m-3/laravel-vuejs-dddLaravel公式ドキュメント公式ドキュメントに...

この記事に関連するコミット

• add node container
• add VSCode dev container
• install vite ts template

nodeコンテナのDockerfileを作成する

Vueの実行にはnode.jsの環境が必要です。
nodeコンテナのDockerfileを作成していきます。

nodeやPHPといった汎用的なお決まりのイメージは、公式のDockerHubでホスティングしてくれているので、そちらを利用します。

FROM node:17-buster

# install app
RUN apt update \
    && apt install -y git

WORKDIR /projects

docker-composeに追加する

先ほど作成したDockerfileを指定してnodeコンテナの定義を追加します。

node:
  build:
    context: ./docker/node
  volumes:
    - ./vue:/projects
  tty: true

VSCode RemoteContainerの設定ファイルを追加する

「laravel-vuejs-ddd/vue」ディレクトリの下に「.devcontainer.json」を追加します。

これでVSCodeのコマンドパレットでRemote-Containers: Open Folder in Container...を実行し、「vue」ディレクトリを開くことでnodeコンテナで開くことが出来ます。

{
  "name": "vue",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "../.devcontainer/docker-compose.yml"
  ],
  "service": "node",
  "workspaceFolder": "/projects",
  "shutdownAction": "none",
  "settings": {},
  "extensions": []
}

Viteをインストールする

Vueのビルドを行ったり開発サーバーを実行するためにVue CLIを使うのが一般的でしたが、Vue3ではViteがオススメです。

Viteはフランス語で「ヴィート」と発音するそうで、これまた日本人泣かせな単語です。
Vue.jsの開発者であるEvan You氏が開発しており、開発サーバーが一瞬で立ち上がるのが感動モノです。

yarnでインストールする

nodeのパッケージマネージャーはnpmやyarn、最近ではpnpmなどもありますが、いい具合に枯れてきているyarnを使います。
どれを選んでも一長一短ですが「npmとyarnとpnpmの違い2021」の記事が分かりやすいので比較・参考にして下さい。

create vite

公式ドキュメントを参考にviteプロジェクトを作成します。
コマンドラインで案内に従って選択していきます。

yarn create vite

Project name

プロジェクト名をセットします。

Select a framework

vueを選択します。

Select a variant

TypeScriptを使用するため、vue-tsを選択します。

実行確認

作成したプロジェクト名でディレクトリが作成され、スキャフォールディングでテンプレートが作成されます。
コマンドの実行結果に以下のように実行コマンドが表示されるため、順番に実行して開発サーバーが開始されることを確認します。

二番目のyarnで関連モジュールがインストールされるので忘れずに実行します。

Done. Now run:

  cd vite-project
  yarn
  yarn dev

表示されるURLにアクセスしてサンプルページが表示されればOKです。