この記事では初めてVueを使ってwebアプリケーション開発をするための方法と手順をご紹介いたします！！
VueはVue2.x→Vue3.xへの移行であったり、開発スタイルの選択肢が複数あったりします。
初めから公式ドキュメントだけ読んで、開発をスタートすると選択肢の多さに戸惑うかもしれません。
始めから選択肢が複数あると悩みますよね。。。
そこで、この記事ではVueのサンプルアプリケーションを構築するところをご紹介します。
事前準備
この記事の内容は、npm（Node Package Manager）というパッケージマネージャーを使います。
そのためNode.jsバージョン16以上が必要になります。
まだインストールがお済みでない場合は、以下のリンクよりダウンロードしてインストールしてください。
主旨から外れるため、インストールの詳細はこの記事では割愛します。別記事でご紹介したい、、、
・Node.jsのインストール
こちらからNode.jsはインストールできます。選択肢が2つありますが左側（LTS）を推奨です。
Vueプロジェクトの構築
次にプロジェクトフォルダを作成します。コマンドラインを使って実行してみましょう。
作成後、そのフォルダに移動してからnpmを使ってVueプロジェクトを作成します。
>>の行はコマンド実行不要！！
mkdir vue-pj
>> mkdir xxx実行後、xxxというフォルダが生成されます
cd vue-pj
>> xxxフォルダに移動します。コマンドラインでの現在のフォルダは、pwdで確認できます
npm init vue@latest
>> Vueのプロジェクト雛形を作成します。コマンドラインに幾つかの質問が表示されます。今回は全てNo構いません
>> 選択肢にyesで答えると、その選択肢が適用されます
>> 以下のような質問が表示されます。
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.作成が終わりましたら、プロジェクトを実際に確認してみましょう。
先ほどのコマンドラインで続けてください。
cd <your-project-name>
>> 上の質問に答えたプロジェクト名のフォルダが生成されますので
>> cd xxxで移動します
npm install
>> 同時に生成されるpackage.jsonを使って、基本ライブラリーをインストールします
npm run dev
>> ローカル環境で開発サーバーを起動します
>> http://localhost:xxxxをブラウザで開いてみてくださいおめでとうございます！
ここまで実行できれば、ブラウザ上でVite Appが確認できると思います。
まとめ
Vueプロジェクトの作成方法をご紹介しました。
他にも方法はありますが、まずは一つの方法を基に色々試してみると良いと思います。
