NOTO

projectにnuxt appを追加

 Date:2019-02-20 21:07:00 +0900
 Categories: TECHNOLOGY

概要

今回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:

[#####################################################################] 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 をガーッと読んで、そしたらなんとかできるようになった(本の内容は使ってないのだけど)。

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

続く。

Tweet