Mac に Node.js+Vue をインストールする

Windows でしか使ったことがなかったので、Mac にも Vue 環境を作りたいと思います。

スポンサーリンク

nodebrew のインストール

Node.js のバージョン管理システムらしいです。バージョンごとに管理する予定はないですが、後から作るのはめんどくさそうなので、この際入れておきます。

Homebrew を使ってインストールしますが、Homebrew は Mac に Anaconda をインストールする記事でやったので省略します。

$ brew install nodebrew
$ nodebrew -v 
nodebrew 1.0.0 # インストール完了

Node.js のインストール

最新版の Node.js をインストールします。fetch 直後に Warning: Failed to create the file で怒られる場合は、ディレクトリを作成してから再度実行します。

$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list
v10.6.0 # インストール完了

current: none

使用するバージョンの指定

インストールするバージョンを指定することもできます。

$ nodebrew ls-remote # インストール可能なバージョンの確認(例:v10.6.0)
$ nodebrew install-binary v10.16.0

インストールしただけでは current: none になっているので、使用するバージョンを指定する必要があります。

$ nodebrew use v10.6.0
$ nodebrew ls
v10.6.0

current: v10.6.0 # 切り替え完了

パスを通す

.bashrc に記録します。ない場合は恐らく怒られるので先に作っておきます。

$ 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 のインストール

nodejs-test$ npm init
nodejs-test$ ls
package.json # npm init 後に生成される

nodejs-test ディレクトリ下でコマンドを実行した場合は上のようになります。設定した内容が package.json に反映されます。

vue-cli も Vue と一緒に入れます。

$ npm install vue
$ npm install --global vue-cli

サンプルプロジェクトの作成と実行

$ vue init webpack hello-vue

? Project name ... # 全て初期設定

Documentation can be founded at ... # 完了

Webpack を使ったサンプルプロジェクトは一行で作ることができます。

$ cd hello-vue
$ npm run dev

 Your application is running here: http://localhost:8080

npm run dev すると開発環境の設定でビルドされて http://localhost:8080 で接続できるようになります。

最後に

思ったより簡単に入ってくれてよかった。

タイトルとURLをコピーしました