はじめに
この記事では、2020年4月現在の公式ドキュメントにのっとった形で環境構築をし、
ルーティング（画面遷移）まで開発する方法を紹介します。
ある程度Vue.jsを触っている方が対象ですが、コピペで実行できるように書きます。
環境
npmバージョン: 6.10.2
環境構築
以下のコマンドを使います。
$ npx create-nuxt-app <project-name>
npxは、npm5.2.0からデフォルトで入っています。
$ npx create-nuxt-app sample
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in sample
? Project name (sample)
ここから質問タイムです。結構長いです。
? Project name (sample)
# 最初に指定した名前を使うなら何も入力せずエンター
? Project description (My pioneering Nuxt.js project)
# プロジェクトの説明。何も入力せずエンターでおk
? Author name ({user name})
# プロジェクト作者。何も入力せずエンターでおk
? Choose programming language (Use arrow keys)
❯ JavaScript
TypeScript
# 使い慣れた方を選択
? Choose the package manager
Yarn
❯ Npm
# 使い慣れた方を選択
? Choose UI framework (Use arrow keys)
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js
# 使い慣れたものを選択。Noneにしても後から入れられます
? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro
# Noneが推奨らしい
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA) Support
◯ DotEnv
# 使い慣れたものを選択
? Choose linting tools
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
# 使い慣れたものを選択
? Choose test framework (Use arrow keys)
❯ None
Jest
AVA
# 使い慣れたものを選択。Noneにしても後から入れられます
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
Single Page App
# SSRかSPAか。ニーズに合わせて選択
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
◯ Semantic Pull Requests
# 使い慣れたものを選択
質問タイムおわり。お疲れ様でした。
🎉 Successfully created project sample
To get started:
cd sample
npm run dev
To build & start for production:
cd sample
npm run build
npm run start
以下のコマンドを実行し、指定アドレスにアクセス
$ cd プロジェクト名
$ npm run dev
Hello Worldする
プロジェクト直下から、pages/index.vueを編集します。
template、scriptタグ内を以下のように変更すると、
<template>
<div class="container">
<h1 class="title">
Hello World
</h1>
</div>
</template>
<script>
export default {
}
</script>
シンプルなHello World画面ができました。
ルーティングする
次のような画面構成にし、それぞれの画面に遷移できるようにします。
- TOPページ（先ほど作ったHello Worldを使います）
- 犬のページ
- 猫のページ
1. pages配下にvueファイルを作成
index.vueからコピーし、Cat.vueとDog.vueを作ります。
sample/pages
$ ls
Cat.vue Dog.vue README.md index.vue
2. 内容を書き換える
h1タグの中身をこのように書き換えます。
<template>
<div class="container">
<h1 class="title">
犬のページです
</h1>
</div>
</template>
猫も同じように。
3. ナビゲーション用のコンポーネントを作成
components配下にNavi.vueという名前のファイルを作成します。
sample/components
$ ls
Logo.vue Navi.vue README.md
<template>
<nav>
<nuxt-link to="/">TOP</nuxt-link>
<nuxt-link to="/dog">Dog</nuxt-link>
<nuxt-link to="/cat">Cat</nuxt-link>
</nav>
</template>
<style scoped>
/* ナビゲーション */
nav {
display: flex;
align-items: center;
background: #222;
}
nav a {
display: block;
padding: 0.5em;
color: #eee;
line-height: 1em;
text-decoration: none;
}
/* アクティブなリンク */
.nuxt-link-exact-active {
background: #64c9a2;
}
</style>
nuxt-linkはrouter-linkのようなもので、パスを指定するとそのurlにアクセスします。
/ は pages/index.vue を表示します。
4. ナビゲーションを表示する
layouts配下にあるdefault.vueを修正し、ナビゲーションを表示するようにします。
<template>
<div>
<Navi />
<nuxt />
</div>
</template>
<script>
import Navi from '~/components/Navi.vue'
export default {
components: {
Navi
}
}
</script>
・・・
5. 動きをみる
画面にアクセスしてリンクをクリックしてみると、しっかり画面遷移できています。
さいごに
Nuxt.jsで、開発環境構築から画面遷移の開発までできるようになりました。
vueで開発する際は、画面遷移の設定を router.js に書かなくてはなりませんでしたが、
Nuxt.jsでは「ディレクトリ構成からルーティング処理の設定を自動生成してくれる」という神機能によって、その手間が無くなりました。
長くなりましたが、読んでくださってありがとうございました。
Nuxt.jsのはじめの一歩を踏み出す一助になれば幸いです。