projectにnuxt appを追加

概要

今回Railsでapiサーバーをやりたいという理由で、完全にフロントとapiを分けるっていうことをやりたくフロントのアプリケーションをどうしようか迷っていたんですが、Nuxtがどうも良さそうということで試してみた。

インストール

$ yarn create nuxt-app frontend
yarn create v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.4.3" with binaries:
      - create-nuxt-app
[#####################################################################] 369/369> Generating Nuxt.js project in /Users/ryo/works/ANNP/25pm/frontend
? Project name frontend
? Project description frontend for 25pm.
? Use a custom server framework none
? Choose features to install Axios
? Use a custom UI framework none
? Use a custom test framework ava
? Choose rendering mode Single Page App
? Author name Katsumata Ryo
? Choose a package manager yarn

  To get started:

	cd frontend
	yarn run dev

  To build & start for production:

	cd frontend
	yarn run build
	yarn start

  To test:

	cd frontend
	yarn run test

✨  Done in 743.52s

公式の日本語ドキュメントと若干違ったけれど、雰囲気でやった。

$ yarn run dev
yarn run v1.13.0
$ nuxt
ℹ Preparing project for development                                  20:57:27
ℹ Initial build may take a while                                     20:57:27
✔ Builder initialized                                                20:57:27
✔ Nuxt files generated                                               20:57:27

✔ Client
  Compiled successfully in 5.01s

ℹ Waiting for file changes                                           20:57:34

   ╭─────────────────────────────────────────╮
   │                                         │
   │   Nuxt.js v2.4.3                        │
   │   Running in development mode (spa)     │
   │   Memory usage: 165 MB (RSS: 233 MB)    │
   │                                         │
   │   Listening on: http://localhost:3000   │
   │                                         │
   ╰─────────────────────────────────────────╯

http://localhost:3000 でアプリケーションが立ち上がります。Railsと一緒かーと若干悩ましげ。

見れた。

続き書いて行きますが、一旦ここまでで公開。

試しに1ページ作ってみる

もともとVueでつくってた一枚のページを簡単に作ってみる(結果めちゃくちゃハマった)。そのページは背景に画像があって一秒ごとに時刻が更新されるページです。時刻表示のところだけ記録代わりにメモする

moment.jsを使う

本当はコンポーネントに分けなければいけないのだろうけど、一体pages/index.vue にべた書きする。以下は最終的なコードです。最初Vueのように data的な軽い感じでやろうとしたけれど全然うまく行かず、最終的には使うつもりのなかったvuexを使った(クラシックモードでやりたかったが、最終的にモジュールモードで)

まず moment.jsをnuxtのプロジェクトに追加した。

$ yarn add moment @nuxtjs/moment

このコマンドのあとに config に追加。以下はファイルです。

// nuxt.config.js

{
  modules: [
    ['@nuxtjs/moment', ['ja']]
 ]
}
// pages/index.vue

<template>
  <div class="window" id="app">
    <div class="time" v-cloak>{{$store.state.time}}</div>
  </div>
</template>

<script>
  import moment from 'moment';

  export default {
    asyncData(context) {
      window.setInterval(function() {
        var time = moment().format('HH:mm:ss');
        context.store.commit('reload', time)
      }, 1000)
    }
  }
</script>

<style>
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    font-family: "Noto Sans JP";
  }

  .window {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    background-size: cover;
    color: #fff;
    background-position: center;
    background-attachment: fixed;
    background-image: url("/images/bg.jpg");
  }

  .time {
    margin: 0 0 40px 0;
    font-size: 180%;
    text-align: center;
    padding-top: 40vh;
    font-family: 'Cutive Mono';
  }

  .entrance {
    text-align: center;
  }

  .entrance .button {
    display: inline-block;
    vertical-align: middle;
    padding-top: 7px;
    width: 150px;
    height: 30px;
    background-color: #fff;
    color: #333;
    font-size: 90%;
    font-weight: bold;
  }
</style>
// store/index.js

export const state = () => ({
  time: ''
})

export const mutations = {
  reload(state, time) {
    state.time = time
  }
}

コードにするとこれだけなんだけど、nuxt.js ビギナーズガイド をがーっと眺めて該当ヒントがないか見たり。そしたらVueが全然わかってないってことで 基礎からわかるvue.js をガーッと読んで、そしたらなんとかできるようになった(本の内容は使ってないのだけど)。

こういう今まで触ったことのない技術に触れるの本当に学習が下手で圧倒的にハマるし時間かかってセンスない。

続く。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください