Node.jsとVue.jsの環境構築（Mac)

概要

MacでVue.jsの環境構築を行った時のメモ。インストールの流れは以下の通り。

• Homebrewのインストール
• nodebrewのインストール
• node.jsのインストール
• vue.jsのインストール

Homebrew

HomebrewはMacOS用のパッケージ管理ソフトである。
Debian系だとAPT、RedHat系だとYum、windowsだとNuget、chocolatyみたいなもの。

Homebrewのインストール

Homebrewの公式サイトにあるスクリプトを実行する。

terminal

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストール後はbrew -vを入力するとバージョンを確認することができる

terminal

$ brew -v
Homebrew 2.1.15
Homebrew/homebrew-core (git revision 068d; last commit 2019-11-03)

nodebrew

nodebrewはnode.jsのバージョン管理をするためのツールである。

nodebrewのインストール

先ほどインストールしたHomebrewを用いて、nodebrewをインストールする。

terminal

$ brew install nodebrew

nodebrew -vでバージョンを確認する。

terminal

$ nodebrew -v
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

node.js

準備

インストールする前に、フォルダを作っておく必要があるので、以下のコマンドを入力しておく。

terminal

$ mkdir -p ~/.nodebrew/src

インストールできるバージョンの確認

nodebrew ls-remoteでインストール可能なバージョンを確認する。

terminal

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6
  ...

node.jsのインストール

• バージョンを指定してインストールする場合
  • nodebrew install-binary {version}
• 最新版をインストールをインストールする場合
  • nodebrew install-binary latest

私の場合、とりあえず最新版をインストール。
nodebrew lsでインストールしたバージョンを確認する。

terminal

$ nodebrew install-binary latest
$ nodebrew ls
v13.0.1

current: none

インストールしたnodeを有効化する

nodebrew use {version}をターミナルに入力して、nodeを有効化する。

terminal

$ nodebrew use v13.0.1
$ nodebrew ls
v13.0.1

current: v13.0.1   <- ここがnoneではなく設定したバージョンになっていればOK

nodeとnpmのパスを通す

今のままでは、nodeコマンドやnpmコマンドにパスが通っていないので、以下のコマンドを入力する（bashの場合）

teminal

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

追記後、ターミナルを再起動する。

node.jsのインストール完了の確認

node -vとnpm -vを入力して、バージョン名が表示されればインストールが完了している。

terminal

$ node -v
v13.0.1
$ npm -v
6.12.0

Vue CLI

Vue CLI の公式ガイド
https://cli.vuejs.org/guide/installation.html
日本語訳
http://www.fumiononaka.com/Business/html5/FN1807001.html

vue-cliのインストール

Vue.jsの開発支援用のコマンドをインストールする。

terminal

$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.0.5

これで、インストール完了。

[追記]あとで、node.jsのLTS版であるv12.13.0をいれました。