Vueのプロジェクト作成

手順　-　CLIで作成する場合

• CLIでプロジェクト作成。
  「vue create プロジェクト名」で作成する。ここではプロジェクト名をcli_appとしている。

> vue create cli_app

• その後は任意の選択を行う。

? Please pick a preset: (Use arrow keys)  
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

「Default (Vue 3)」が最新である。「Manually select features」では、Vue Router等のインストールも追加できる。

• 【参考】Vue Routerのインストールは、後からでも行える。

> cd cli_app
> npm install vue-router@4

参考：Vue.jsにVue Routerを導入して、タグで画面遷移する方法！ | codelikeなブログ

• 内臓サーバーでプロジェクトをデモ実行

(cli_appフォルダで行う)
> npm run serve

この後、ブラウザから「localhost:3000」へアクセスすると、初期画面が表示される。

• 以上。
  尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

• ビルド方法
  公開用にビルドする。

(cli_appフォルダで行う)
> npm run build

これで、distフォルダに公開用ファイル類が書き出される。

手順　-　Viteで作成する場合

※CLIで作成するより開発中のビルド等のスピードが早い。ただ、babel, eslint、routerなど自分で入れる必要ありか。

• Viteでプロジェクト作成。
  「npm init vite-app プロジェクト名」で作成する。ここではプロジェクト名をvite_appとしている。

> npm init vite-app vite_app
> cd vite_app
> npm install

• 【参考】Vue Routerのインストールは、後から行う。

(vite_appフォルダで行う)
> npm install vue-router@4

参考：Vue.jsにVue Routerを導入して、タグで画面遷移する方法！ | codelikeなブログ

• 内臓サーバーでプロジェクトをデモ実行

(vite_appフォルダで行う)
> npm run dev

この後、ブラウザから「localhost:3000」へアクセスすると、初期画面が表示される。

• 以上。
  尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

• ビルド方法
  公開用にビルドする。

(vite_appフォルダで行う)
> npm run build

これで、distフォルダに公開用ファイル類が書き出される。