Vue.jsの開発環境構築

「そうだ、Vue.jsで遊ぼう」

Vue.jsの環境構築を行ったのでメモしておく。 前提条件は下記

• macOS Catalina (デフォルトがZshになった)
• Node.jsインストール済みだが、再インストールしたいと思っている

以前Node-REDの開発環境を作成する際にNode.jsをインストールしていたが、nodebrew等のパッケージ管理ツールを通さずに直接インストールしてしまっていた。そこで、今回一度Node.jsのアンインストールを行って、パッケージ管理ツールを用いて改めてNode.jsを導入してから、Vue.jsのインストールを行った。

Node.jsのアンインストール

• 公式ページからインストーラをダウンロードしてストールを行っていた
• Node.jsの実行ファイルの存在場所を確認$which node
• ディレクトリを削除rm -rf /usr/local/bin/node
• Node.jsが消えたか確認node -v
• npmが消えたか確認npm -v
• npmのディレクトリを削除rm -rf ~/.npm (本来はnpmのアンインストールと削除を最初に行うべきかもしれない)

Node.jsのインストール

• Homebrewでnodebrewをインストールbrew install nodebrew
• nodebrewが入っているかを確認nodebrew -v
• PATHを通すecho 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
• 再読み込みsource ~/.zprofile
• インストール用のディレクトリを作成mkdir -p ~/.nodebrew/src
• インストール可能なバージョンの確認nodebrew ls-remote
• Node.jsのインストールnodebrew install v12.16.2
• インストールできているか確認nodebrew list
• 利用するバージョンを指定nodebrew use v12.16.2
• Node.jsが使えるか確認node -v
• yarnをインストールnpm install -g yarn
• yarnが使えるか確認yarn -v

Vue.jsのインストール

• Vue.jsをインストールyarn global add @vue/cli
• Vue.jsが使えるか確認vue --version

Vue.jsの動作確認

• プロジェクトの作成vue create myprojects
• 出来上がったディレクトリに移動cd myprojects
• 動かすyarn serve