GW 最終日に初めて Nuxt をさわって Hello World の表示までできたのでまとめておきます。
Nuxt プロジェクトを作る
以下のページを参考に進めていきました。
プロジェクト名は hello-nuxt とします。
今回は yarn を使っていきます。
$ yarn create nuxt-app hello-nuxt
質問がいくつかでます。
初めてなのであまり深く考えずに選択していきます。
? Project name (hello-nuxt)
変更しないので、return
? Project description (My riveting Nuxt.js project)
このままでいいので、return
? Use a custom server framework (Use arrow keys)
❯ none <return>
express
koa
adonis
hapi
feathers
micro
(Move up and down to reveal more choices)
server framework?
よくわからないので後で調べよう return
(矢印キーで選択できます)
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to
invert selection)
❯◉ Progressive Web App (PWA) Support
◉ Linter / Formatter
◉ Prettier
◉ Axios
とりあえず全選択 A => return
(スペースキーで選択、Aキーで全選択)
? Use a custom UI framework
none
bootstrap
❯ vuetify
bulma
tailwind
element-ui
buefy
(Move up and down to reveal more choices)
Vuetify 使ってみたかったので選んで return
? Use a custom test framework (Use arrow keys)
❯ none
jest
ava
今回、テストはなしで return
? Choose rendering mode
Universal
❯ Single Page App
SPA を試してみたい(気持ちだけはある)ので、選択して return
? Author name (Your Name)
特に変更なければ return
? Choose a package manager
npm
❯ yarn
今回は yarn を選んで return
インストールが進んで、プロジェクトの初期設定が完了し、以下のメッセージが表示されます。
To get started:
cd hello-nuxt
yarn run dev
To build & start for production:
cd hello-nuxt
yarn run build
yarn start
プロジェクトディレクトリに移動します。
$ cd hello-nuxt
この時点で git に初回コミットしておきましょう。
$ git add -A
$ git commit -m 'initial commit'
動かしてみる
試しに動かしてみます。
$ yarn run dev
なぜかエラーが出ました。
16:44:40 ERROR (node:10653) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
エラーが発生、調査する
ぐぐってみると issue がありました。
まさしくこれです。
適当に訳してみると↓とのこと。
・これは依存関係の警告
・依存関係の警告は何か動かなくなるということではない
・@nuxtjs/pwa モジュールが原因で、次のメジャーバージョンアップで解決する。マイナーバージョンアップをリリースすることはできない。
・beta 版があるから試してみて
@nuxtjs/pwa を beta 版にバージョンアップすればよさそうです。
(注:必要なければ pwa を切ればよいはず)
エラーを解決する
次のコマンドで情報を見てみると、バージョン 3.0.0-beta.14 に latest タグが付いていました。
$ yarn info @nuxtjs/pwa
latest
を指定して @nuxtjs/pwa をインストールします。
$ yarn add @nuxtjs/pwa@latest
再度、動かしてみると
$ yarn run dev
エラーはなくなりました。
ブラウザから http://localhost:3000/ へアクセスしてみます。
Welcome ページが表示されました。
@nuxtjs/pwa をベータ版に更新したので、package.json, yarn.log が更新されています。
この時点で git にコミットしておくとよいでしょう。
Hello World!
次のページを参考に進めました。
ていうか、ソースは完全にコピーです(;^ω^)
hello.vue を追加する
pages/hello.vue ファイルを追加し、以下のソースを記述します。
<template>
<p>Hello {{ name }}!</p>
</template>
<script>
export default {
data: () => {
return { name: 'World' }
}
}
</script>
動かして、http://localhost:3000/hello にアクセスしてみると
表示されました。
メニューにリンクを追加する
左上のメニューにリンクを追加してみます。
layouts/default.vue にリンクらしきものが記述されていました。
script に記述さている配列 items
に以下を追加します。
{
icon: 'thumb_up',
title: 'Hello',
to: '/hello'
}
layouts/default.vue の差分
$ git diff layouts/default.vue
diff --git a/layouts/default.vue b/layouts/default.vue
index a98563e..4704f5a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -79,6 +79,11 @@ export default {
icon: 'bubble_chart',
title: 'Inspire',
to: '/inspire'
+ },
+ {
+ icon: 'thumb_up',
+ title: 'Hello',
+ to: '/hello'
}
],
miniVariant: false,
icon については以下のページを参照です。
おわり
インストールからここまで、2時間くらい遊んだでしょうか。
結構楽しかったので、つい本をポチってしまいました。
何か簡単なアプリを Nuxt で作ってみたいですね。
おわり。