環境構築

~~......は飛ばしますが、~~
後述の前に、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!と書かれたページがブラウザに表示されれば成功です。

最近はTypeScriptで記述が多いような気がします(ただの所感) ↩
JavaScriptコード内にHTMLを記述できる拡張機能 ↩
利用することでシングルページアプリケーションを簡単に作成できる ↩
データをまとめて管理するライブラリ ↩
ユニットテストを行うためのライブラリ ↩
UI操作を含めてアプリケーション全体をテストするライブラリ ↩
JavaScriptなどのソースコードが正しいかどうかを解析するツール ↩
ソースコードを整形するツール ↩