🌞

Vue.js 3.xの初期設定手順

2022/09/04に公開約900字

環境

  • macOS:Monterey
  • バージョン:12.5.1

手順

nodebrewをインストール

# インストール
$ brew install nodebrew

# nodebrewがインストールされたか確認
$ nodebrew -v

# npmも一緒にインストールされているか確認
$ npm -v

# セットアップ
$ nodebrew setup

# 以下のexport文を~/.zshrcもしくは~/.bash_profileに追記
$ vim ~/.zshrc
# export PATH=$HOME/.nodebrew/current/bin:$PATH

# 反映
$ source ~/.zshrc

nodeをインストール

# nodeをインストール
$ nodebrew install stable

# インストール済みのnodeバージョンの一覧を表示
$ nodebrew ls

$ nodebrew use 使用するnodeのバージョン
# ex) nodebrew use v18.8.0

Vue.jsをインストール

$ npm install -g @vue/cli

$ vue --version

Vue.jsのプロジェクトを作成

$ vue create プロジェクト名
# - Vue.js 3系を選択
# - Yarnを選択

$ cd プロジェクト名

# TypeScriptを導入する場合は、以下のコマンドを実行
$ vue add typescript

$ yarn serve

http://localhost:8080/ にアクセスすると以下の画面が表示されます。

関連資料

Discussion

ログインするとコメントできます