Vue.jsの開発環境構築
【注意】
最新のvue CLI バージョンは3系です*1が
この環境構築はvue CLI 2系での手順です。
2系と3系ではパッケージ名が変わっていたり*2、
プロジェクトの作成がコマンド以外にvue UIで可能になるなどの違いがありますのでご注意ください。
JavaScriptもNode.jsもなにも知らない人が、とりあえずVue.jsで"Hello World"を出力するところまでをやってみようと思います。
なにはともあれ環境構築から。
目的
JavaScriptやVue.jsやNode.jsについて何も知らなくても環境構築できること。 なのであまり細かい設定についてはふれず、とにかく起動できるところまでをゴールとします。
環境
- MacBook Pro
- Homebrew
- macOS Mojave 10.4
必要なインストールまとめ
Qiitaなど見てみるといきなりVue.jsだけ入れればいいってもんでもないようなので、環境構築に必要なものをざっくり整理してみた。
- nodebrewをインストール
- Node.jsをインストール
- vue-cliをインストール
- Vue Devtoolsをインストール
環境構築
1. nodebrewをインストール
nodebrewはNode.jsのバージョン管理ツール。Node.jsをインストールするのに必要なので最初に入れる。
$ brew install nodebrew
2. Node.jsをインストール
インストールしたnodebrewを使ってNode.jsの最新版をインストールする。 Vue.jsをインストールするためにnpmを使用するのだが、npmはNode.jsをインストールすると使用可能になる。
npmはNode Package Managerの略で、Node.js用に作られたライブラリやパッケージを管理する為のパッケージマネージャー。
$ nodebrew install-binary latest
最後の引数は[stable:安定版][latest:最新版]です。
なんかエラーがでた。
Fetching: https://nodejs.org/dist/v11.14.0/node-v11.14.0-darwin-x64.tar.gz Warning: Failed to create the file Warning: /Users/izumi/.nodebrew/src/v11.14.0/node-v11.14.0-darwin-x64.tar.gz: Warning: No such file or directory
No such file or directoryって言われている。
このエラーは ~/.nodebrew/src のディレクトリが必要なんだけど存在しないときに出るということなので、~/.nodebrew/srcを作ることで解決できる。*3
$ mkdir -p ~/.nodebrew/src
これを実行してからあらためてNode.jsのインストールを実行したらうまくいった。
インストールされたNode.jsのバージョンを確認。v11.14.0がインストールされているのがわかる。
$ nodebrew ls v11.14.0
使いたいNode.jsのバージョンをインストールしたバージョンのリストから選ぶ。 今回はv11.14.0しか入れていないのでv11.14.0を選ぶ。
nodebrew use v11.14.0
3. PATHを通す
以下を実行して~/.bash_profileを開く。ファイルがなければ$ touch .bash_profileを実行して作成する。
$ vi ~/.bash_profile
以下を追加する。
export PATH=$HOME/.nodebrew/current/bin:$PATH
設定ファイルを読み直す。
exec $SHELL -l
4. ここまで確認
各バージョンを確認し、バージョンが表示されればOK。
$ node -v v11.14.0 $ npm -v 6.7.0
5. vue-cliをインストール
vue-cli*4はコマンドラインを使ってvue.jsの開発を支援してくれるツール。vue-cliをインストールする時にwebpackも一緒にインストールされる。
Node.jsをインストールするとnpmが使えるようになるので、npmコマンドを使用してvue-cliをインストールする。
$ npm install -g vue-cli
ここまでできれば環境構築に必要な作業は完了。
6. Vue.js Devtoolsをインストール（推奨）
Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能。これを導入するとconsoleを開かなくてもdataの中身などを確認することができデバッグなどが簡単になって便利なので、公式でも入れることを推奨している。
ここにアクセスして追加する。
7.プロジェクトを作成する
ここからは実際に動かすための手順。
今回は"helloworld"というプロジェクトを作成する。initコマンドの引数は以下の通り。
vue init [テンプレート名] [プロジェクト名]
テンプレートは色々種類がある*5が、どんな時に何を使うのかわかっていないので一番無難そうな「webpack」を選択した。
vue init webpack helloworld
いろいろ聞かれるがとりあえず今回はすべてenterキーで進めることにした。
8.起動する
プロジェクトの作成が終わるとこんなかんじのことを言われる。
# Project initialization finished! # ======================== To get started: cd test npm run dev
指示通りtestディレクトリに移動してnpm run devコマンドをたたきサービスを実行。
すると、以下のようなメッセージが表示されVue.jsのWebサーバが起動する。
I Your application is running here: http://localhost:8080
http://localhost:8080にアクセスしてみる。
これが表示されれば環境構築は成功！
ちなみにサービスを終了はctrl + c。
次回は"Hello World"を出力してみます。
