Vue3 チュートリアル 1 環境構築 #Vue.js

ゴール

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

Vueとは？

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

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

環境構築

Vue3の新たなデフォルトと公式でも説明されているライブラリを元にプロジェクトを構築します。
具体的には以下のライブラリたちです。
必要なタイミングで適宜追加していくので、最初はVue3単体で機能を確かめながら進めます。

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

インストールするもの

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

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

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

  vite v2.9.8 dev server running at:

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

  ready in 542ms

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チェックよりメモリ使用量が少ない等のメリットがあります。
拡張機能から@builtin typescriptを入力し、TypeScript and JavaScript Language FeaturesをDisable(Workspace)します。

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

Prettier

保存時にPrettierでフォーマットしてくれるようにしておきます。
拡張機能でPrettierをインストールし、プロジェクトのrootディレクトリに.prettierrc.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と入れれば出てきます。

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

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}

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