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