セットアップ
Node.js の実行環境を用意して、Nuxt.js 利用するためのセットアップを行いましょう。
今回、サイト制作では、Twitter Bootstrapを利用しますので、 Twitter Bootstrapの設定も同時に行い、画面にHello Worldを出力してみましょう。
# Node環境のセットアップ
Nuxt.jsの環境構築にはNode.jsを利用します。
PC上にNode.jsの実行環境がセットアップ済みかを確認するには、
ターミナル上から node -v
コマンドを実行します。
$ node -v
コマンドを実行して、バージョン番号が正常に表示されたら、Node.jsの実行環境はセットアップ済みです。
以下のような形で command not found
と表示される場合、
新しくNode.jsのセットアップが必要です。
$ node
-bash: node: command not found
Node.jsの最新版は、以下のURLからファイルをダウンロードして、インストールすることが出来ます。
https://nodejs.org/ja/download/
TIP
手元のNode.jsのバージョンが上記のサイトで配布されているバージョンよりも 大幅に低い場合、同様に上記のサイトからダウンロードを行い、最新版のNode.jsへのセットアップを行ってください。
# Nuxt.js環境のセットアップ
Node.js環境のセットアップが完了したら、Nuxt.jsのプロジェクトをセットアップを始めていきましょう。
Nuxt.jsのプロジェクトは npx
コマンドを利用して、
以下のようなコマンドで、すすめることが出来ます。
$ npx create-nuxt-app nuxtjs_website
コマンドを実行すると以下のように ?
マークとともにいくつかの質問が展開されます。
Enterキーを押して進めると、nuxtjs_website
フォルダが作成され、
開発に必要なファイル群の一式がダウンロードされます。
$ npx create-nuxt-app nuxtjs_website
create-nuxt-app v2.15.0
Generating Nuxt.js project in sample_nuxtjs_website
? Project name (nuxtjs_website)
TIP
手元にyarnのセットアップを行っていない場合、
Choose the package manager
の質問では、npm
を選択するようにしてください。
ダウンロードが完了したら、cd
コマンドで作成されたフォルダに移動し、
npm run dev
コマンドで開発用のサーバを起動します。
$ cd nuxtjs_website
$ npm run dev
表示されるアドレス http://localhost:3000
にブラウザでアクセスして、
Nuxt.jsの初期画面が表示されれば準備は完了です。
# Nuxt.jsを利用したサイト制作
実際にサイトのコーディングを進めるにあたって、
まずは作成されたフォルダ nuxtjs_website
を適当なエディタで開いてみましょう。
Nuxt.jsでプロジェクトのセットアップを行った場合、 いくつかのファイルやフォルダ群が用意されますが、主に利用するのは以下の3つです。
- layout : サイト全体で利用する共通のテンプレート
- pages : 個々のページで利用するサイト情報
- nuxt.config.js : プロジェクト全体の設定ファイル
まずは、サイト上でTwitter Bootstrapを利用するために、 head要素で、Bootstrapの読み込みを行います。
Nuxt.jsのプロジェクトでは、head要素の中身はnuxt.config.jsで管理されるため、
nuxt.config.jsの head.link
のセクションに以下のような形でBootstrapの記述を追加します。
module.exports = {
// ...
head: {
// ...
link: [
{ rel: 'stylesheet', href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
}
次に、画面に表示するページのコーディングを進めましょう。 デフォルトで表示されているNuxt.jsの初期画面は、以下の2つのファイルから出力されています。
- layout/default.vue
- pages/index.vue
まずは共通のレイアウトとして機能している
layout/default.vue
を以下のように書き換えましょう。
<template>
<div>
<nuxt />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
TIP
layout はページ全体の共通レイアウトを記述するファイルです。
次に、 pages/index.vue
を以下のように変更します。
<template>
<div class="container">
<h1>Hello World</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
TIP
pages は個々のページ要素を記述するファイルです。
画面の中央に、 Hello Worldの文字が表示されれば、準備は完了です。
実際のWebサイトのコーディングを進めていきましょう。
# Check!
次のステップに進む前に以下の内容をもう一度確認しておきましょう。
- 開発用のサーバは正しく起動していますか?
pages/index.vue
上での変更が、即座にブラウザに反映されることを確認しておきましょう。 - Bootstrapのセットアップは正しく行えていますか?
pages/index.vue
上で.btn.btn-light
などの要素を配置して、Bootstrapの装飾が適用されることを確認しておきましょう。
# 関連リンク
Nuxt.js のセットアップ