これまでのチャプターではHTMLとCSSを使ってWebサイトを作ってきましたが、物理部のウェブサイト制作班ではHTMLとCSSの応用のような"NuxtJS"というものを使ってWebサイトを作っていこうと考えています。ですのでこの記事ではNuxtを使うメリットやプロジェクトの作成・編集する方法を紹介していきます。

1.1 Nuxtとは？？？

NuxtJSとはVueJSベースのフロントエンド向けフレームワークです。
HTMLやCSSのような書き方でHTMLやCSS以上の機能を使うことができ、慣れるまで少し時間がかかりますが慣れたらずっと使いたくなるようなものとなっています。
NuxtJS公式サイト

1.2 Nuxtのインストール

1.2.1 NodeJSのインストール

NuxtJSを入れるためにはベースとなるNodeJSをインストールする必要があります。NodeJSは公式サイトからMac版・Windows版のインストーラーを使用してインストールしてください(おすすめは16.6.0LTSです)。

学校配布などのMacにNodeJSをインストールしたらNodeJSのバージョン管理ソフトである「n」をインストールしておくのがおすすめです。

npm install -g n

を実行してインストールしておきましょう(バージョンの管理がとても楽になります)

1.2.2 NuxtJSのインストール

NuxtJSは「NuxtJSを使った1つのプロジェクト」を格納するフォルダ(以下プロジェクトフォルダ)にインストールすることで使えるようになります。

1. デスクトップなどのプロジェクトフォルダを格納したいフォルダをターミナルで開きます

cd desktop

2. NuxtJSのプロジェクトを格納するフォルダを作成します

npx nuxi init nuxt-app

3. これでフォルダは作成できたのでプロジェクトが動作するようにnpmの初期化をおこないます

npm install

以上でNuxtJSのインストールは完了です！
次はNuxtJSプロジェクトを実際に動かしていきましょう！

1.3 NuxtJSを実際に動かそう

NuxtJSはHTMLファイルのようにただファイルを開くだけでサイトのプレビューは見れません。
プレビューを開くためにはプロジェクトフォルダで

npm run dev

でサーバーを立ててください。
サーバーを建てると

とでるので「> Local:」の後ろに続くURLを開いてください。