Nuxtの環境構築
Nuxt の環境構築を行います。また Nuxt での開発がしやすくなる環境も構築します。
Nuxt の開発環境を構築するには、JavaScript 系のパッケージマネージャーが必要です。パッケージマネージャーとは、さまざまなソフトウェアのインストールやアンイストールが容易にできるツールとなります。
JavaScript 系のパッケージマネージャーには、npm もしくは Yarn がありますが、公式が推奨している Yarn を使用します。 → NuxtJS
Yarn は Node.js で動作します。Node.js とはサーバーで動く JavaScript の実行環境です。そのため Node.js もインストールします。
目次
・YarnとNode.jsのインストール
・Nuxtの新規プロジェクトの作成
YarnとNode.jsのインストール
Node.jsのインストール
Git Bash を開き、以下のコマンドを実行してください。Node.js のバージョンが表示されれば成功です。
もし Node.js のバージョンが表示されない場合は、一度 Git Bash を再起動して、コマンドを実行しましょう。
▼Node.jsのバージョン確認
node -v
>v16.0.0など
Yarnのインストール
続いて Yarn をインストールします。Yarn の公式サイト を開いて、インストーラーをダウンロードしましょう。
Git Bash を開き、以下のコマンドを実行してください。Yarn のバージョンが表示されれば成功です。
▼Yarn のバージョン確認
yarn -v
> 1.22.0 など
もし Yarn のバージョンが表示されない場合は、一度 Git Bash を再起動して、コマンドを実行しましょう。
Nuxtの新規プロジェクトの作成
ターミナルで Nuxt の新規プロジェクトを作成します。まずはカレントディレクトリをデスクトップに移動します。
cd Desktop
次にデスクトップ配下で、nuxt_hello_world という プロジェクトをターミナルで作成します。
▼ ~/Desktop
yarn create nuxt-app プロジェクト名
質問されるので、解答していきます。基本的に Enter を押せば OK です。
? Project nuxt_hello_world => 何もせず Enter
? Programming language => Javascript
? Choose the package manager => Yarn
? Choose UI framework => None
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection) => 何もせず Enter
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction) => ESLint と Prettier をスペースキーで押して、Enter
? Testing framework: 何もせず Enter
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: 何もせず Enter
? Version control system: Git
以下のような画面が出ると、新規プロジェクトの作成が完了です。
続いてVS Codeに作成したフォルダをドラッグ＆ドロップします。