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

FRONT END

LiSMOtechの小谷です。

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

Homebrewのインストール

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

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

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

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

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

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

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

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

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

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

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

と書き加えます。

でリフレッシュします。

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

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

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

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

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

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

Nuxt.jsのインストール

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

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

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

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

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

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

まとめ

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

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

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00