はじめに
私が行った環境構築の方法をまとめました。
こちらの記事を参考にしています。
Vue.js環境構築
環境構築の方法
1. Node.jsをインストールする
- まず、Node.jsをインストールするために公式サイトにアクセスして、インストーラーをダウンロードします。
- 次に、ダウンロードしたファイルをダブルクリックして開きます。
「続ける」や「同意する」を選択していくと、「インストール」が出てくるので、選択してインストールします。
下記の画面になったらインストール完了です。閉じるを選択します。
- 次に、Node.jsがインストールされているか確認します。
node -v
とコマンドを叩くと
v18.17.0
とバージョンが表示されます。
バージョンの確認ができればOKです。
2. Vueファイルを作成する
- 以下のコマンドを叩いてVueファイルを作成します
npm create vue@latest
いくつか質問されるので、それぞれ答えていきます。
Ok to proceed? (y)：作成を進めて良ければyとコマンドを叩きます。
Project name：プロジェクトネーム（ファイルの名前）を指定します。
Add TypeScript?：TypeScriptを追加しますか？今回はYesにしました。
Add JSX Support?：JSXを追加しますか？今回はYesにしました。
Add Vue Router for Single Page Application development?：
SPA開発用にVueRouterを追加しますか？今回はYesにしました。
VueRouterとはSPA構築を行うためのプラグインです。
SPAを構築すると、別のページに移動する際に、ページ全体ではなくページ間で共通でない部分だけ読み込まれるようになり、ページの移動をスムーズにすることができます。
Add Pinia for state management?：
状態管理用にPinia追加しますか？今回はNoにしました。
PiniaとはVue.jsの状態管理のためのライブラリで、アプリのデータ管理を簡単にしてくれるものです。
今回作成するものはデータを多く扱うことがないので、Noにしました。
Add Vitest for Unit Testing?：
単体テストにVitestを追加しますか?今回はNoにしました。
Vitestとはテスト環境の設定を簡単にできるようにするものです。
今回はテスト環境を用意することはないと思うので、Noにしました。
Add an End-to-End Testing Solution?：
エンドツーエンドのテストソリューションを追加しますか?今回はNoにしました。
エンドツーエンドのテストソリューションとは、ページの機能や実際のネットワークリクエストを本番の環境と同じように構築された環境でテストすることだと思うのですが、今回はテストしないと思うので、Noにしました。
私も曖昧なので詳しく知りたい方はこちらの記事を参考にしてみてください。
Vue公式ページ
Add ESLint for code quality?：
コード品質のために ESLint を追加しますか?今回はNoにしました。
EslintはJavaScriptやTypeScriptなどの静的解析ツールで、コーディングのルールを決められるものです。
複数人でコードを書くときなどに役立つみたいなのですが、今回は1人なのでNoにしました。
Add Vue DevTools 7 extension for debugging? (experimental)：
デバッグ用にVue DevTools 7拡張機能を追加しますか?今回はYesにしました。
Vue DevToolsはVue.jsの開発をサポートする Chromeの拡張機能で、consoleを開かなくてもコードのエラーやバグを見つけて修正することができます。
2. 全ての選択が終わったら、Project nameで設定した名前（今回はvue-todolist）のフォルダが追加されてるので確認してみてください。
3. npmをインストールする
- 先程追加したフォルダに以下のコマンドを叩いて移動します。
cd フォルダ名
2.次に以下のコマンドを叩いてnpmをインストールします。
npm install
3.次にnpmがインストールされてるから確認します。
npm -v
とコマンドを叩くと
10.8.1
とバージョンが表示されます。
バージョンの確認ができればOKです。
4. ローカルサーバーを起動する
- ターミナルで
npm run dev
とコマンドを叩くと、以下のようにターミナルに表示されます。
このhttp://localhost:5173/ がローカルサーバーにアクセスできるURLです。
ローカルサーバーにアクセスして以下の画面が表示されれば環境構築完了です。
