はじめに

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

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

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

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

前提

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

Vite + Vue3環境構築

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

$ cd /作業/パス/

# 私は /var/www/hands-on/vue3にしました。

Dockerfile, docker-compose.ymlの作成

# sudoつけないでね！

$ touch Dockerfile
$ touch docker-compose.yml

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" ]

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

アプリケーションディレクトリの作成
```
# sudoつけないでね！

$ mkdir front
```

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

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    // 追加
  }               // 追加
})

サーバー起動

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

かんせい！

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

はじめに

前提

Vite + Vue3環境構築

構成ファイルの説明

Vuetify3の導入