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

Web関連情報・技術

当サイトにはプロモーション・広告が含まれています。

この記事は最終更新日から 3 年以上が経過しており、内容が古くなっている可能性があります。

かれこれ 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 でサイトが起ち上がる。

参考ページ

☕コーヒーをおごる

Buy Me A Coffee

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

広告