MacにNode.js+Vueをインストールする
Windows でしか使ったことがなかったので,Mac にも Vue 環境を作りたいと思います.
nodebrew のインストール
Node.js のバージョン管理システムらしいです.バージョンごとに管理する予定はないですが,後から作るのはめんどくさそうなのでこの際入れておきます.
Homebrew を使ってインストールしますが,Homebrew は Mac に Anaconda をインストールする記事でやったので省略します.
terminal
$ brew install nodebrew
$ nodebrew -v
nodebrew 1.0.0 # インストール完了
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
Node.js のインストール
最新版の Node.js をインストールします.fetch
直後に Warning: Failed to create the file
で怒られる場合は,ディレクトリを作成してから再度実行します.
terminal
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary latest
# OR
$ nodebrew install latest
$ nodebrew list
v10.6.0 # インストール完了
current: none
使用するバージョンの指定
インストールするバージョンを指定することもできます.
terminal
$ nodebrew ls-remote # インストール可能なバージョンの確認(例:v10.6.0)
$ nodebrew install-binary v10.16.0
インストールしただけでは current: none
になっているので,使用するバージョンを指定する必要があります.
terminal
$ nodebrew use v10.6.0
$ nodebrew ls
v10.6.0
current: v10.6.0 # 切り替え完了
パスを通す
.bashrc
に記録します.ない場合は恐らく怒られるので先に作っておきます.
terminal
$ echo 'export PATH=$PATH:/Users/<USERNAME>/.nodebrew/current/bin' >> ~/.bashrc
$ source ~/.bashrc # PATH を反映させる
$ node -v
v10.6.0 # PATH 設定完了
$ npm -v
6.1.0 # NPM も使うので確認
Vue のインストール
terminal
nodejs-test$ npm init
nodejs-test$ ls
package.json # npm init 後に生成される
nodejs-test ディレクトリ下でコマンドを実行した場合は上のようになります.設定した内容が package.json に反映されます.
vue-cli も Vue と一緒に入れます.
terminal
$ npm install vue
$ npm install --global vue-cli
サンプルプロジェクトの作成と実行
terminal
$ vue init webpack hello-vue
? Project name ... # 全て初期設定
Documentation can be founded at ... # 完了
Webpack を使ったサンプルプロジェクトは一行で作ることができます.
terminal
$ cd hello-vue
$ npm run dev
Your application is running here: http://localhost:8080
npm run dev
すると開発環境の設定でビルドされて http://localhost:8080
で接続できるようになります.
最後に
nodebrew で管理すると Node.js のバージョンの違いでエラーが発生したときなどに切り替えられるので,オススメです.