Vue3 チュートリアル 1 環境構築

### ゴール

- Vue3のアプリを開発できるプロジェクトをViteを使って作成する

https://qiita.com/TakahiRoyte/items/9033b61a0e528324da4c

## Vueとは？

Vue.jsはインタラクティブなフロントエンドを作るためのJavaScriptフレームワーク。JavaScriptによりページの書き換えを実現し、ユーザーの操作に応じた動的（リアクティブ）なウェブアプリケーションを実現できます。フレームワークにより、アプリケーションを作るための「仕組み」と「ルール」が提供されており、一貫性のあるウェブアプリケーションが作りやすくなってます。

フロントエンドの構造（HTML）、装飾（CSS）、機能（JavaScript）を1つのファイルに内包するSingle File Component(SFC)という形で開発ができます（そうじゃない利用方法もあります）。これは`.vue`という拡張子のファイルの中にHTML/CSS/JavaScriptが含まれます。これはそのままだと当然ウェブブラウザでは読み込めないので、WebpackやRollupなどのバンドラーを用いてHTML/CSS/JavaScriptのアセットに変換することでウェブブラウザから見えるようになります。

## 環境構築

Vue3の[新たなデフォルトと公式でも説明されているライブラリ]((https://blog.vuejs.org/posts/vue-3-as-the-new-default.html))を元にプロジェクトを構築します。
具体的には以下のライブラリたちです。
必要なタイミングで適宜追加していくので、最初はVue3単体で機能を確かめながら進めます。

- [Vue 3](https://v3.ja.vuejs.org/)
- 爆速ビルドツールチェーンの**Vite**
- よりわかりやすい`<script setup>`構文
- シングルファイルコンポーネント(SFC)のより良いサポートを提供する**Volar**
- `vue-tsc`によるCLIでのSFCの型チェック
- シンプルなステート管理の**Pinia**

### インストールするもの

それぞれリンク先からインストールする。

- [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
- [Node v16.X.X](https://nodejs.org/ja/)
- [Git for Windows (& Git Bash)](https://gitforwindows.org/)
- [Google Chrome](https://www.google.co.jp/chrome/?brand=YTUH&gclid=CjwKCAjw9-KTBhBcEiwAr19ig1dQevGlVWm7ts5RWMlwTGOBzlrdj385pmvw97h35J4oGA4GCikG7xoC9EwQAvD_BwE&gclsrc=aw.ds)
- [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ja)

### プロジェクトのセットアップ

プロジェクトはViteのテンプレート作成機能を使って作ります。
プロジェクトを作る場所は任意ですが、説明はCドライブ直下に`dev`というディレクトリを切りその中で進めます。
`npm create vite@latest`をGit Bash上で打つと、幾つか選択肢が出るので以下の通りに進めてください。
Git BashはGit for Windowsと同時にインストールされています。
スタートメニューからGit Bashで検索してみてください。

```bash
$ cd /c/

$ mkdir dev

$ cd dev/

$ npm create vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... vite-vue-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:\dev\vite-vue-project...

Done. Now run:

  cd vite-vue-project
  npm install
  npm run dev
``` 

`Now run`の指示通りに、順番に3つのコマンドを実行していきましょう。
`cd`でディレクトリを移動して、`npm install`で依存npmモジュールをインストールし、
`npm run dev`で開発用環境を実行します。`npm run dev`で以下の表示がでればOKです。

```bash
  vite v2.9.8 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 542ms
```

[http://localhost:3000/](http://localhost:3000/)にアクセスすると、ページが開けるはずです。
一旦この状態で最も基礎となるセットアップは完了です。

### VSCode拡張機能

#### Volar

Vue2ではVeturがありましたがVue3はVolarの時代です。
インストールは簡単で、VSCodeの拡張機能からVolarを検索して入れればokです。
アイコンがどう見ても麦わらの一味なのでこれで良いのかと不安になると思います。

Vue2の開発でVeturを触ったことがある人は、Veturをアンインストールするか、
Workspace内でDisabledの状態にしておくと良いです。

続いてVolarのTake Over Modeを有効化します。
VSCodeのbuilt-inなTSチェックより[メモリ使用量が少ない等のメリットがあります](https://github.com/johnsoncodehk/volar/discussions/471)。
拡張機能から`@builtin typescript`を入力し、TypeScript and JavaScript Language FeaturesをDisable(Workspace)します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89911/27ce8ecb-5226-ceb2-bee9-ecf3b2c2cd7e.png)

これでTake Over Modeが有効化され、VSCodeの右下にその旨のメッセージが表示されます。
表示されなかったらリロードしてください。

#### Prettier

保存時にPrettierでフォーマットしてくれるようにしておきます。
拡張機能でPrettierをインストールし、プロジェクトのrootディレクトリに`.prettierrc.yml`を作成します。

```yml:.prettierrc.yml
tabWidth: 2
prinitWidth: 100
useTabs: false
semi: false
singleQuote: true
```

続いてWorkspace SettingsにFormat on Saveをチェックします。
Workspace Settingsを開くにはCtrl+Shift+PでWorkspace settingsと入れれば出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89911/fb315d09-cf38-2cce-c998-56d87e33efbc.png)

この設定はWorkspace内の`.vscode/settings.json`に反映されます。
このファイルもGitにコミットして管理することで開発者で設定を共有できます。
逆にチームに共有すべきでない個人的な設定はUser Settingsという方に保存してください。

```json:.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}
```

この状態でCtrl+Sなどでファイルを保存してフォーマットが効くか確認してみてください。
たまに既に開いているタブではうまく動かないことがあったので、
念のためVSCodeを再起動すると確実です。

https://qiita.com/TakahiRoyte/private/bd2496ccf181610dc072