Vue CLIを導入してモダンなウェブサイトを作ろう

2020 5/21

2020.04.02 2020.05.21

Vue.jsについて学習しmacにVue.jsのアプリを簡単にビルドできるようにVue CLIを導入しました。
せっかくなので、初学者の方でもインストールしやすいようにやり方をまとめようと思います。

目的

Vue CLIをmacにインストールする

（前提、環境）

mac
macOS Mojave 10.14.5
Homebrew 2.2.11
nodejs v 10.16.3

はじめに

前提としてx-codeとHomebrew,nodejsが入っていることが前提になります。

公式

参考記事

山田さん著書のこれから始めるVue.jsを参考にしております。
めちゃくちゃわかりやすかったです・・・・！

Vue CLI 導入手順

x-codeの導入

x-codeとは

Xcodeは、Apple社が提供するMac OS X向けの統合開発環境です。ソースコードの編集だけでなく、デバック機能やiOSシュミレーターを利用した端末での動作確認などが行えます。
Apple公式の開発ツールなので、macを操作するときには必須で入れましょうという認識で良いかと思います。

実行

以下のURLからDeveloperページを開きます。
https://developer.apple.com/downloads/index.action?name=Xcode

サインインを求められるので、自分のApple IDのログイン情報を入力していきましょう。

認証を求められる場合がありますが、指示通りに進めてください。
以下のような画面になります。
Xcodeのバージョンごとにリストになっています。

今回はXcode 10.2をインストールします。
「+」の部分をクリックして詳細を表示させて「Xcode 10.2.1.xip」の部分をクリックするとダウンロードが開始されます。
ダウンロードが完了したらxipファイルを展開しましょう。
展開するとXcodeのアプリケーションファイルができるので、アプリケーションフォルダに移動しましょう。

Homebrewの導入

Homebrewとは

Mac OS上でソフトウェアの導入を単純化するパッケージ管理システムのひとつです！
実行ファイルや設定ファイル、ライブラリなどを一つのファイルとしてまとめているものをパッケージと呼びます。
パッケージ管理システムとはこのパッケージのインストール（アンインストール）作業を一元的管理するものです。
パッケージやライブラリの依存関係などが管理できるので便利ですよね。

実行

早速インストールしていきましょう。
※公式ページに載っているコマンドです。

# ターミナル
$/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

番外編インストール先

Homebrewは個別のディレクトリにパッケージをインストールし、それらへのシンボリックリンクを/usr/localに作ります。
以下のコマンドを入力することで確認することができます。

# ターミナル
$ cd /usr/local
$ find Cellar
Cellar/wget/1.16.1
Cellar/wget/1.16.1/bin/wget
Cellar/wget/1.16.1/share/man/man1/wget.1

$ ls -l bin
bin/wget -> ../Cellar/wget/1.16.1/bin/wget

番外編 wget

brew installコマンドを入力することで基本的にHomebrewで用意されているパッケージはインストールすることができるのですが、urlを入力してインストールできるwgetというコマンドを手に入れてみましょう。

# ターミナル
$ brew install wget

npmを使うための準備

npmとは

Node.jsのパッケージ（Package ）を管理する（Manager）ツールです。
まんま頭文字の略ですね！

nodejsをインストール

Homebrewを使ってインストールしていきます。
Homebrew公式サイト
割となんでもインストールできるのでHomebrewまじ神・・・
nodeのバージョン10.19.0を入れたいので下記の通りで打ちます。

# ターミナル
$ brew install node@10

Vue CLIのインストール

実行

npmを使ってインストールします。
その際に-gオプションをつけてグローバル登録しておきます。

# ターミナル
$ npm install -g @vue/cli

Vue CLIで実際にアプリをビルドする

Vue CLIはアプリを1つのディレクトリの配下に格納して管理します。
早速プロジェクトを作ってみましょう！
※全部まとめてプロジェクトと呼びます。

プロジェクト作成

適当にプロジェクトをまとめるディレクトリを作成してその配下に移動し、vue createコマンドを入力しましょう。
今回はホームディレクトリ配下にprojectsディレクトリを作成してその配下にtraining_appという名前のアプリを作ります。

# ターミナル
$ cd
$ mkdir projects
$ cd ~/projects
$ vue create training_app

Vue CLI v4.2.3
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

という画面が出てくると思うのですが、まずはデフォルトで作りましょう。
そのままEnterキーを押しましょう。

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM

こちらではパッケージマネージャーはnpmかyarnどちらか聞かれているのですが、今回はnpmを使いたいと思うので下のUse NPMを選択してください。

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn 
❯Use NPM

下記のようなメッセージが出たら完成です！

added 73 packages from 42 contributors and audited 25486 packages in 8.865s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project training_app.
👉  Get started with the following commands:

 $ cd training_app
 $ npm run serve

アプリの実行

ビルドが完了したら実際に起動してみましょう。

# ターミナル
$ cd training_app
$ npm run serve

下記のようなメッセージが出たらブラウザのurlにhttp://localhost:8081/
を入力し確認してみましょう！

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4143ms                                                                                                                21:30:39

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.