【Mac】簡単！Nuxt.js環境構築の方法

LiSMOtechの小谷です。

Nuxt.jsの環境を簡単に作成する手順を書いていきます。今回はMacでの方法になります。

Homebrewのインストール

Homebrewを使ってnodebrewを入れたいので、まずHomebrewをインストールします。

以下のコマンドをvs codeターミナルで入力します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

入力後、PCのパスワードを聞かれるので、パスワードを入力します。

しばらく待つとインストール完了して再度パスワードを聞かれるので、入力します。

インストール後、バージョンを確認してみます。

Homebrew 3.2.8-4-g3573ff8
Homebrew/homebrew-core (git revision 66ea9e6; last commit 2019-10-22)

nodebrewとnode.jsのインストール

nodebrewはnode.jsを管理するためのツールです。先ほど入れたHomebrewからnodebrewをインストールします。

以下のコマンドを入力します。

brew install nodebrew

インストール後、以下のコマンドでバージョンを確認します。

nodebrew -v

インストールとバージョンの確認ができたら、設定を追加します。以下のコマンドでファイルを書き換えます。

vi ~/.bash_profile

export PATH=$HOME/.nodebrew/current/bin:$PATH

と書き加えます。

source ~/.bashrc

でリフレッシュします。

設定後、以下のコマンドでnode.jsをインストールします。

nodebrew install v14.17.5

※この記事を書いた時点で推奨版であったバージョン14.17.5をインストールしました。

以下のコマンドで実行すると、今までインストールされたnode.jsのバージョンが一覧で出てきます。

nodebrew ls

今回の場合、出てくるのは先ほどインストールしたバージョンのみが出てきます。

以下のコマンドで使用したいバージョンを選択します。

nodebrew use v14.17.5

以下のコマンドで選択したnode.jsのバージョンが確認できれば完了です！

node -v

Nuxt.jsのインストール

以下のコマンドでcreate-nuxt-appを利用して簡単に使い始めることが出来ます。

npm init nuxt-app プロジェクト名

これを実行すると、途中で色々と設定を聞かれると思いますが、今回は仮で以下のようにしました。

? Project name: nuxt-test-project
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

設定後、プロジェクト名がそのままフォルダ名になっていると思いますので、以下のコマンドで作成したフォルダに移動します。

cd プロジェクト名

移動後に以下のコマンドで起動させます。

npm run dev

http://localhost:3000/で画面を開きます。

このような画面が開きます！

まとめ

以上で簡単にNuxt.jsの環境を構築できたと思います。node.jsがすでに入っている方は、create-nuxt-appのコマンドを実行するだけなので、もっと早くできると思います！

このように簡単に環境構築はできますので、この機会にぜひNuxt.jsをさわってみてはいかがでしょうか？