前のパートに戻る 完了して次のパートへ  

  0-4 Vue CLIのインストール

これから説明する環境構築の手順はMac OSを対象としています。

では、今からVueでアプリケーションを作成するための環境構築を行なっていきましょう。

今回は、VueCLIというアプリケーション開発に必要なツールやライブラリを簡単に構築できるコマンドラインインターフェイスを使います。

VueCLIwebpackという「.vue」ファイルや「CSS」などさまざまなファイルをまとめるバンドルツールを簡単に使用できます。

さっそくインストールしましょう。

1. Node.jsをインストールする


Vue CLIを使うにはnpm(Node Package Manager)が必要です。

npmはNode.jsのパッケージを管理するツールです。

Node.jsをインストールすると使えるようになるので、まだ入れていなければ、下記手順でインストールしましょう。


homebrew(Mac OSのパッケージ管理システム)のインストール


以下のコマンドを実行してください。

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

上記のコマンドを実行すると以下のような結果が表示されます。Installation successful!と表示されていればうまくインストールされています。

==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh


homebrewのバージョンを確認


以下のコマンドを実行してください。

$ brew -v

上記のコマンドで以下のようにhomebrewのバージョンを確認できます。

Homebrew 2.1.6

nodebrew(Node.jsのバージョン管理システム)のインストール


nodebrewを使うと、複数のプロジェクトを持ち、それぞれNode.jsのバージョンが違っても簡単に切り替えることができます。

今回はNode.jsの安定版を指定してインストールするために使います。

以下のコマンドを実行してください。

$ brew install nodebrew

nodebrewのバージョンを確認


以下のコマンドを実行してください。

$ nodebrew -v

上記のコマンドで以下のようにnodebrewのバージョンを確認できます。

nodebrew 1.0.1

Node.jsの安定版のバージョンをインストール


以下のコマンドを実行してください。

$ nodebrew install-binary stable

上記のコマンドを実行すると以下のような結果が表示されます。Installed successfullyと表示されていればうまくインストールされています。

Fetching: https://nodejs.org/dist/v12.8.0/node-v12.8.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully


インストールされたnodeを有効化


まず、上でインストールした安定版のバージョンを指定します。

以下のコマンドを実行してください。

$ nodebrew use stable

上記のコマンドで以下のように安定版のnodeを指定できます。

use v12.8.0

次に、nodeのバージョンが設定されていることを確認しましょう。

以下のコマンドを実行してください。

$ nodebrew ls

上記のコマンドで以下のように安定版のnodeが指定できていることを確認できます。

current: v12.8.0


環境パスを通す


環境パスを通すとは、特定のプログラムをプログラム名だけで実行できるようにすることです。

環境パスを通すとは

以下のコマンドを実行してください。

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

nodeのバーションを確認


以下のコマンドを実行してください。

$ node -v

上記のコマンドで以下のようにnodeのバージョンを確認できます。環境パスを通したので、nodeコマンドが使えるようになりました。

v12.8.0

2.Vue CLIをインストールする


※もしVue CLIの(1.x または 2.x) がグローバルに既にインストールされていたら、先に下記コマンドでアンインストールしておきましょう。

以下のコマンドを実行してください。

$ npm uninstall -g vue-cli

では、Vue CLIをインストールしましょう。

-gオプションをつけることでパッケージがグローバルにインストールされ、どこにインストールされてもコマンドを使用できます。(パスを通さなくてもコマンドを使うことができます)

以下のコマンドを実行してください。

$ npm install -g @vue/cli

上記のコマンドを実行すると以下のようにインストールされたVue CLIが表示されます。(バージョンはその時の最新版がインストールされます)

+ @vue/cli 4.1.1

Vue CLIのバージョンを確認しましょう。

以下のコマンドを実行してください。

$ vue --version

上記のコマンドで、以下のようにVue CLIのバージョンを確認できます。

4.1.1

これでVue CLIのインストールは完了です。

次のステップで、Vue CLIを使ってプロジェクトを作成していきましょう。

議論

0 質問

このコースの評価は?