【Vue3,Vite】Vueプロジェクトの作成

環境構築

......は飛ばしますが、
後述の前に、VSCodeのインストールとNode.jsのインストールが必要です。

Vueプロジェクト作成コマンド

プロジェクトを格納する親フォルダ上で実行します。

npm init vue@latest

enterを押すと以下の質問がずらっと出てきますが、落ち着きましょう。

プロジェクト作成時の質問と回答

Project name:　hogehoge
Add TypeScript? --yes or no
Add JSX Support? --yes or no
Add Vue Router for Single Page Application development? --yes or no
Add Pinia for state management? --yes or no
Add Vitest for Unit Testing? --yes or no
Add Cypress for both Unit and End-to-End testing? --yes or no
Add ESLint for code quality? --yes or no
Add Prettier for code formatting? --yes or no

質問の意味

Project name:

• 任意の名前を入力する　ex. hello-vue

Add TypeScript?

• TypeScript¹で記述するかどうか

Add JSX Support?

• JSX²を利用するかどうか

Add Vue Router for Single Page Application development?

• Vue Router³を利用するかどうか

Add Pinia for state management?

• Pinia⁴を利用するかどうか

Add Vitest for Unit Testing?

• Vitest⁵を利用するかどうか

Add Cypress for both Unit and End-to-End testing?

• Cypress⁶を利用するかどうか

Add ESLint for code quality?

• ESList⁷を利用するかどうか

Add Prettier for code formatting?

• 　Prettier⁸を利用するかどうか

プロジェクトの作成完了

下記のような画面になれば作成成功です。

(略)
Done. Now run:
  cd hello-vue
  npm install
  npm run dev

• cd hello-vue
• npm install
• npm run dev
  以上、3つのコマンドを順番に実行します。

開発用サーバーの起動

npm run devを実行後、
http://localhost:0000/ のようなURLが出てきます。
URLの上にカーソルをのせ、commandを押しながらクリックします。

You did it!と書かれたページがブラウザに表示されれば成功です。

1. 最近はTypeScriptで記述が多いような気がします(ただの所感) ↩

2. JavaScriptコード内にHTMLを記述できる拡張機能 ↩

3. 利用することでシングルページアプリケーションを簡単に作成できる ↩

4. データをまとめて管理するライブラリ ↩

5. ユニットテストを行うためのライブラリ ↩

6. UI操作を含めてアプリケーション全体をテストするライブラリ ↩

7. JavaScriptなどのソースコードが正しいかどうかを解析するツール ↩

8. ソースコードを整形するツール ↩