Vue CLI導入メモ


1.Node.jsのインストール

1. Homebrewのインストール

ターミナルに下記のコマンドを打ち込んでMacOS用のパッケージマネージャー「Homebrew」をインストールする。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2. nodebrewを使ってNode.jsをインストールする

下記のコマンドでNode.jsのバージョン管理ツール「nodebrew」をインストール

nodebrewのインストール
$ brew install nodebrew

nodebrewを使って安定版のNode.jsをインストールし、有効化

Node.jsのインストール
#安定版のインストール
$ nodebrew install-binary stable

#インストール確認
$ nodebrew list

v16.12.2

current: none

#安定版を有効化
$ nodebrew use stable

3.環境変数の設定

nodebrewのsetupでパスを確認

環境変数設定
#nodebrewのセットアップ
$ nodebrew setup

Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

ターミナルでzshを使っている場合、「~/.zshrc」に上記のexport PATH=$HOME/.nodebrew/current/bin:$PATHを追記して保存

最後にターミナルで下記を実行

環境変数設定の適用
$ source ~/.zshrc

2.VueCLIプロジェクトの作成

1.VueCLIのインストール

VueCLIのインストール
$ npm install -g @vue/cli

2.VueCLI新規プロジェクトの作成

任意のプロジェクトフォルダに移動して下記を実行

新規VueCLIプロジェクト作成
$ vue create プロジェクト名

3.VScodeとGithub連携

1.GithubのリモートリポジトリにSSHキーを追加

ここの記事を参照

2.VScodeとの連携

VScodeでプロジェクトフォルダを開き、ターミナルウィンドウを開いて下記のコマンドを実行

リモートリポジトリの設定
$ git remote set-url origin SSH版リポジトリURL

4.その他

リモートからcloneするときはnode_moduleを下記のコマンドでインストールする

プロジェクトのセットアップ
$ npm install