さくっとVue3をインストールして、デモページを表示することを目標にします。
準備するもの
- MacOS
- Nodeの最新バージョン
- VSCode
この３つ！
Mac
MacBookなど
Nodeの最新バージョン
※すでにNodeが使える場合は飛ばしてください。
最新のNode.jsをインストールするために、Nodeバージョン管理ツールを入れます。
ツールは volta を使用します。
ターミナルを開く
Macの右上の虫眼鏡マークをクリックして、「ターミナル」と入力してターミナルを開きます
voltaインストール
# install Volta
curl https://get.volta.sh | bash
最新のNodeをインストール
# install Node
volta install node
# Nodeバージョン確認
node -v
これで最新のNodeが使えるようになります。
Vue3インストール
続いて、Vueのテンプレートをインストールします
自分の作業ディレクトリ$HOME/projects/sample等を用意しておくと、今後ちらからずに済みます！
# 作業ディレクトリに移動
cd $HOME/projects/sample
# 最新のVue3インストール
npm init vue@latest
オプション選択
✔ 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.
- Project name -> vue3-sample
- TypeScript-> Yes
- JSX Support -> No
- Vue Router -> Yes
- Pinia -> Yes
- Vitest -> Yes
- an End-to-End -> No
- ESLint -> Yes
- Prettier -> Yes
上から順番に選択していきます。最低限必要なオプションをYesとします。
Vue3を動かす
ここからはVSCode上で作業します。
上記でプロジェクトが作成されたので、vue3-sampleをVSCodeで開きます。
上部のターミナルタブをクリックして、「新しいターミナル」を選択します。
ターミナルが開かれたら、起動させます
# Node.js 関連のパッケージをインストール
npm install
# 開発サーバーを起動
npm run dev
Webブラウザ(Chromeなど)でlocalhost:5173にアクセスして、デモページが表示されたら完了です。
お疲れさまでした！