新人向け: ViteでVue3+TypeScriptの構築とVuetifyの導入方法

はじめに

部署の新人からよくこんな話を聞きました。

• Vite+Vue3まではとある記事で導入できたが、違う記事でVuetifyの導入をしたらうまくいかない。。。
• vite.config.tsとか、tsconfig.jsonって何ですか？
• node_modulesってところで大量にgitの差分が出ます...

これはフロントエンドの技術力の底上げをしなければ、、！と思い、
部署の新人向けにVite+Vue3+Vuetifyの構築ハンズオン勉強会を開催しました。
その時のメモをこちらにも公開します。

同じような悩みを抱えた方の負担が少しでも解消されれば幸いです。

前提

Docker, docker-composeが入っていること。

Vite + Vue3環境構築

1. 構築したいディレクトリに移動

   $ cd /作業/パス/
   
   # 私は /var/www/hands-on/vue3にしました。
   

2. Dockerfile, docker-compose.ymlの作成

   # sudoつけないでね！
   
   $ touch Dockerfile
   $ touch docker-compose.yml
   

3. Dockerfileに以下をコピペ

   Dockerfile

   FROM node:19-alpine3.16
   
   WORKDIR /var/www/app
   
   RUN apk update && \
       npm install -g npm @vue/cli
   
   USER node
   
   CMD [ "npm", "run", "dev" ]
   

4. docker-composeに以下をコピペ

   docker-compose.yml

   version: '3'
   services:
     app:
       build:
         context: .
         dockerfile: Dockerfile
       volumes:
         - ./front:/var/www/app
       ports:
         - "8080:8080"
       stdin_open: true
       tty: true
   

5. アプリケーションディレクトリの作成

   # sudoつけないでね！
   
   $ mkdir front
   

6. Vite + Vue3 + TypeScriptの構築

   $ docker-compose build --no-cache
   $ docker-compose run app sh
   
   /var/www/app $ npm init vite@latest
     バージョンの確認: (y) ⇒ y ⇒ enter
     アプリ名: .   # 注意！Enterにしないこと
     フレームワーク: Vue
                  : TypeScript
   
   /var/www/app $ npm install
   

7. vite.config.tsの修正

   docker-composeで解放したportの指定と、hostをtrueにする。

   vite.config.ts

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()],
     server: {       // 追加
       host: true,   // 追加
       port: 8080    // 追加
     }               // 追加
   })
   

8. サーバー起動

   Dockerfileの起動コマンドでnpm run devを指定しているので、docker-compose upのみでOK

   $ docker-compose up
   

   起動できたはず！
   起動できていない人はもう一度やり直してみてください。

構成ファイルの説明

• .vscode
  • vscodeの設定ファイル
• node_modules
  • npmやyarnを使ってインストールしてきたライブラリのコードが格納されています。
  • package.jsonでそれぞれがnpm installで作るので、.gitignoreに入れてgitに載せないようにしましょう！
    • デフォルトでされています。
• public
  • 静的ファイル置き場(例) ロゴ.png
• src
  • アプリのソースコードが格納されています。
• .gitignore
  • gitで無視するものを指定します。
• index.html
  • エントリーポイントとなるもの
• package.json
  • インストールするパッケージの情報などが書かれた設定ファイル。
• package-lock.json
  • どんな依存関係で今動いているアプリが構成されているかのファイル。
  • yarnの時はyarn.lockになります。
• tsconfig.json
  • TypeScriptの構成ファイル
  • JavaScriptの前提知識も必要になるので、今はこんなものもあるんだ～くらいに思ってOK
    • target： 生成するJavaScriptコードのバージョン
    • module： 生成するJavaScriptモジュールの形式
    • noImplicitAny： trueに設定すると、TypeScriptの型推測でAny型となった式／宣言があったときにはエラーメッセージが生成されるようになる
    • outDir： 出力先のディレクトリ
    • rootDir： プロジェクトのルートディレクトリ（tscコマンドに渡すTypeScriptコードを含んだルートディレクトリ）
    • sourceMap： trueに設定すると、対応するソースマップファイル（.mapファイル。TypeScriptコードとそこから生成されたJavaScriptコードとの対応関係を記述したファイル）が生成されるようになる
• tsconfig.node.json
  • vite.config.ts等のライブラリの設定ファイルをtypescriptで書くための設定ファイル

Vuetify3の導入

$ docker-compose exec app sh
/var/www/app $ vue add vuetify
  Vuetify 3 - Vite

/var/www/app $ npm install

かんせい！