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

# はじめに

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

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

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

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

## 前提

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

## Vite + Vue3環境構築

1. 構築したいディレクトリに移動
    
    ```bash
    $ cd /作業/パス/
    
    # 私は /var/www/hands-on/vue3にしました。
    ```

1. Dockerfile, docker-compose.ymlの作成
    
    ```bash
    # sudoつけないでね！
    
    $ touch Dockerfile
    $ touch docker-compose.yml
    ```

1. Dockerfileに以下をコピペ
    
    ```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" ]
    ```

1. docker-composeに以下をコピペ
    
    ```yaml:docker-compose.yml
    version: '3'
    services:
      app:
        build:
          context: .
          dockerfile: Dockerfile
        volumes:
          - ./front:/var/www/app
        ports:
          - "8080:8080"
        stdin_open: true
        tty: true
    ```

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

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

1. Vite + Vue3 + TypeScriptの構築

    ```bash
    $ 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
    ```

1. vite.config.tsの修正

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

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

1. サーバー起動

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

    ```bash
    $ 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の導入

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

/var/www/app $ npm install
```

かんせい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/e77a2848-4d03-6e76-93cf-abfcf6388e18.png)