LoginSignup
0

More than 3 years have passed since last update.

Nuxt さわってみた

Last updated at Posted at 2019-05-08

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/ へアクセスしてみます。
screenshot 2019-05-07 17.05.36.png
Welcome ページが表示されました。

左上のメニューから Inspire ページに移動できます。
screenshot 2019-05-07 17.06.03.png
screenshot 2019-05-07 17.06.11.png

@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 にアクセスしてみると
screenshot 2019-05-08 12.27.17.png
表示されました。

メニューにリンクを追加する

左上のメニューにリンクを追加してみます。

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 については以下のページを参照です。

リンクがメニューに表示されるようになりました。
screenshot 2019-05-08 12.36.50.png

おわり

インストールからここまで、2時間くらい遊んだでしょうか。
結構楽しかったので、つい本をポチってしまいました。

何か簡単なアプリを Nuxt で作ってみたいですね。
おわり。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0