Nuxt.jsをローカル環境にインストールする

  • 公開日アイコン
  • 更新日アイコン
Nuxt.jsをローカル環境にインストールする メイン画像

Ad Area

ブラックフライデーセール. 最大 90%OFF

かれこれ4年ほど放置しているWordPressから乗り換える準備をするため、ローカル環境にNuxt.js(2.12.2)をインストールした。

はじめに

以下をインストールしておく。

node.jsnpx(npm)、もしくはYarn Chocolateyなどパッケージマネージャーを利用すると管理が楽である。

手順

Nuxt.jsをインストールするプロジェクト用フォルダを作成し、ディレクトリ内でcreate-nuxt-appを実行する。

npx create-nuxt-app <project-name>
// or
yarn create-nuxt-app <project-name>

<project-name>には任意の文字列を入力する。

いくつか質問を訊かれるので答えていく。
※バージョン2.12.2以上では、質問がさらに増えている。

*** プロジェクト名 ***

先ほど入力したプロジェクト名を再度問われるので、問題なければEnterで進む。

*** 作成者名 ***

問題なければEnter

*** プログラミング言語 ***

「私はTypeScriptに詳しいんだ」という人、またはTypeScriptへの学習意欲に満ちている人以外はJavaScript (Vue.js)にしておくのが無難だろう。

*** パッケージ名 ***

YarnNpmかと訊かれるので、インストールで使用した方を選択する。

*** UIフレームワーク ***

BootstapやBulmaといったCSSフレームワークを問われる。使いたいものを選べばよいが、ここでNoneを選択しても後で設定・インストールすることはできる。

*** サーバーのフレームワーク ***

良く分からなければ、推奨されているNoneのまま進む。

*** Nuxt.jsのモジュール ***

HTTP通信ができるAxiosを選択しておくと後々いろいろと便利らしい。

*** 文法チェックツール ***

特にこだわりがなければESLintでよいと思う。

*** テストフレームワーク ***

分からない・必要なければNone。

*** Nuxtのレンダリングモード ***

ブログを作りたい場合はUniversalを選択する。

*** 利用する開発ツール ***

jsconfig.json(VS Code推奨)を選択(というか、選択項目はこれ1個しかない)

すべて答え終わるとプロジェクトフォルダが作成される。

開発環境で起動するコマンド

npm run dev
// or
yarn run dev

localhost:3000でサイトが起ち上がる。

参考ページ

Ad Area