kazuki.m

Appearance

sumnail

Vue3の開発環境を構築する

created at : 2024/07/20

Vue3

Vue3 の開発環境を構築するための手順の紹介です。

Vue 公式のはじめ方を参考に、Vue3 の開発環境を構築します。

WARNING

Vue2 から Vue3 へのアップデートに伴いVue CLIはメンテナスモードとなっています。
よほどの理由がない限りは、この記事でご紹介する Vue 公式の手順をお勧めします。

前準備 ​

Vue の開発環境を構築する前に、Node.js と npm を事前にインストールしておく必要があります。

まだ Node.js と npm がインストールされていない場合は、以下の記事を参考にインストールしてください。

Node.js と npm がインストールされているか確認するために、以下のコマンドを実行してください。

bash
node -v
>> v18.17.1
# バージョンが18.3より新しいことを確認しましょう！
# Vue3が18.3より新しいNode.jsが必要なためです

Vue3 の環境を構築する ​

Node のバージョンが 18.3 より新しいことが確認できたら、以下のコマンドで Vue3 の環境を構築します。

bash
npm create vue@latest

実行すると、以下の質問が表示されますので、必要に応じて選択します。

質問に対して、<- or -> で選択し Enter キーを押すと設定が適用されます。

bash
Need to install the following packages:
  [email protected]
Ok to proceed? (y)
# yを入力してEnterキーを押す
bash
Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-learning
# 入力したプロジェクト名が作成されます
bash
✔ Add TypeScript? … No / Yes
# TypeScriptを使用する場合はYesを選択します
# 現在の主流のtypeScriptを使うため、今回はYesで進めます
bash
✔ Add JSX Support? … No / Yes
# JSXを使用する場合はYesを選択します
# 今回はNoで進めます
bash
✔ Add Vue Router for Single Page Application development? … No / Yes
# Vue Routerを使用する場合はYesを選択します
# 今回はNoで進めます
# よく使用するライブラリーですが、最初は不要かと思います！
bash
✔ Add Pinia for state management? … No / Yes
# Piniaを使用する場合はYesを選択します
# 今回はNoで進めます
# よく使用するライブラリーですが、最初は不要かと思います！
bash
✔ Add Vitest for Unit Testing? … No / Yes
# Vitestを使用する場合はYesを選択します
# 今回はNoで進めます
# テストで使用するライブラリーですが、最初は不要かと思います！
bash
✔ Add an End-to-End Testing Solution? › No
# End-to-End Testing Solutionを使用する場合はYesを選択します
# 今回はNoで進めます
bash
✔ Add ESLint for code quality? … No / Yes
# ESLintを使用する場合はYesを選択します
# 今回はYesで進めます
bash
✔ Add Prettier for code formatting? … No / Yes
# Prettierを使用する場合はYesを選択します
# 今回はYesで進めます
bash
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
# Vue DevTools 7 extensionを使用する場合はYesを選択します
# 今回はNoで進めます

以上の質問に回答すると、以下のメッセージが表示されます。 手順に沿ってコマンドを実行してください。

bash
Scaffolding project in /Users/kazuki.m/vue-sample/vue-learning...

Done. Now run:
  # 以下のコマンドを実行すると、Vue3の開発環境サーバー起動します
  cd vue-learning
  npm install
  npm run format
  npm run dev

npm run devを実行すると以下のようなメッセージが表示されます。
http://localhost:5174/ にアクセスすると、Vue3 の開発環境が表示されます。

bash
> [email protected] dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.3.4  ready in 188 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

以上で Vue3 の開発環境の構築が完了しました。