概要
今回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 をガーッと読んで、そしたらなんとかできるようになった(本の内容は使ってないのだけど)。
こういう今まで触ったことのない技術に触れるの本当に学習が下手で圧倒的にハマるし時間かかってセンスない。
続く。