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.
結果
こちらが出ていたら起動も成功しています!
終わりに
最初の環境設定部分が結構つまるところかもしれません汗
導入することができたらこれでバリバリVue.jsの学習を進めてみてください!