LoginSignup
19

More than 3 years have passed since last update.

Macのターミナルで【Vue.js(Vue CLI 3系)】のvue コマンドを使えるようにするまでの話

Last updated at Posted at 2020-11-03

そもそもなんでVue.js?

現在、WEBサイトのフロントエンド開発を主に仕事でしているのですが、フロントエンドエンジニアとしてJavaScriptのフレームワークのひとつぐらいまともにプログラミングできないとまずいよな〜と思ったのがきっかけです。
日本語のドキュメントもあり、フレームワークを調べてるときに比較的学習コストが少ないということで今回Vue.jsを選択しました。
現在は様々な機能が使えるVueCLIを使って開発するのがトレンドらしく、とりあえず触ってみよう的な試みです。

Vue.jsについてはこちらの記事に詳しく書いてありました。

Vue.js概要?

環境セットアップのための予備知識

OS環境 Mac OS 10.13.6(High Sierra)

VueCLI 3系をインストールするにあたり、以下のようなサイトを参考にしました。

10分で始めるVue.js(基本編)

Vue CLI 3 をインストールしプロジェクトを作成する方法

Homebrewからnodebrewをインストールして、Node.jsをインストールするまで

、、、。

いきなり、なじみのない言葉が、、、npm、homebrew、nodebrew、Node.js????

ということで調べて自分なりの解釈でざっくりと以下のように理解しました。

Node.js

WEBブラウザ以外でjsを動かすための環境のひとつ。
サーバサイドで動くJavaScriptのことでサーバサイドJavaScriptと呼ばれることもある。
従来のjavascriptととの違いは実行環境(内部的に構築されてるみたい)とライブラリからなっている(最初の時点である程度のモジュールが組み込まれているらしい)

Homebrew

Macのターミナル用の※パッケージ管理システム

※パッケージ管理システムとは
ターミナル用のAppleストアやgoogleストア的なもの。それらが目的に応じていろいろ用意されている。
Ruby→gem/PHP→compser/など

npm

タスクランナー/モジュール(webpackやbrowserifyなど)などの開発環境系のパッケージ管理するためのもの

nodebrew

node.jsのversion管理するためのパッケージ管理システム

パッケージはそれぞれ、依存関係にあり、Vue.jsをインストールするための流れはざっくりこんな感じ

HomebrewをインストールするためにX codeをインストール

nodebrewをインストールするため、Homebrewをインストール

Node.jsとnpmをインストールするため、nodebrewをインストール

VueCLIをインストールするため、Node.jsとnpmをインストール
(node.jsをインストールする際にnpmをインストールされる)

ようやく、VueCLIをインストール

セットアップ

それではいきましょうw

X codeをインストール

App storeからXcodeをインストール

コマンドライン・デベロッパーツールをインストール

ターミナルから$ xcode-select --installコマンドを発行すると
以下のようにインストールを要求されて

$ xcode-select --install
xcode-select: note: install requested for command line developer tools

同時にポップアップが出てくるので"インストール"を選択し利用規約に同意します。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3137343238332f61356335323066322d383938372d353435322d653039382d6164343934363935613039652e706e67.png

Homebrewをインストール

Homebrewの公式サイトからコードをコピペしてEnterを押します。
途中でEnterの入力/インストールユーザのOSパスワードの入力を求められるので入力して進んでください。

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

インストールが確認するには以下のコマンドを実行できればインストールされたことになります。

$ brew doctor

nodebrewのインストール

$ brew install nodebrew

インストールを確認するには

$ nodebrew -v

情報が表示されたらインストールされてます!!

Node.jsとnpmのインストール

Node.jsの最新版をインストール

$ nodebrew install latest

Node.jsを有効にします。

nodebrew use 先程インストールしたNode.jsのver

nodeコマンドを使用するため、パスを通します。

#zshの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc

#bashの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc

先程追加したパスが動くようになり、nodeコマンドが使えるようになります。

#zshの場合は
$ source ~/.zshrc

#bashの場合は
$ source ~/.bashrc

npmはNode.jsとともにインストールされます。

npmがインストールしたか確認

$ npm -v

Node.jsがインストールしたか確認

$ node -v

バージョンが表示されればOKです!!

Vue CLI(Vue.js)のインストール

npm install -g @vue/cli

vueコマンドを使うためのパスを確認

npm bin -g
#/Users/xxxxxxx/npm/bin

vue コマンドを使用するためにパスを通す

$ export PATH=/Users/xxxxxxx/npm/bin:$PATH

vueのインストールを確認

$ vue --version

バージョンが表示されればOKです!!

おしまい

とりあえず、Vueを動かす環境づくりはこんな感じでした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19