Vue.js + Nuxt.js + Element + WP REST APIでHPを作ってみた

今回、Vue.js + Nuxt.jsの勉強ということで何か作りたいなと思っていたところ、HP作ってみるかと思ったので早速やってみました。どんな感じか早速見てもらったほうが早いと思うので以下のリンクをご覧下さい。(スマホ対応はしていません。)

DEMO

なぜVue.js + Nuxt.jsでHPを作るのか?

Vue.jsが流行りで勉強目的だったのですが、jQueryでごにょごにょやっていたところがとても楽にできます。コンタクトフォームのバリデーションやポップアップ、ツールチップ、ページ遷移アニメーションなどなどです。

Nuxt.jsを使うことによりある程度サーバーでレンダリングもやってくれますので、SEO対策にも良さそうです。またルーティングなども自動でやってくれますのでコンポーネントを作ることに注力できます。

Vue.js + Nuxt.jsでHPを作った感想

メリット

Elementを使ったということもありますが、JSを書く時間が少なかったと思います。さきほどのDEMOサイトは1人日もかからず仕上げました。WP REST APIとつなぐところに時間がかかったので次作ったら0.5人日ぐらいでできそうです。

といった意味では、コーディングする時間が短縮されるので、デザインやアニメーションの実装などに時間を割けるのではというのはメリットなのかなと思いました。

上はGTmetrixでの結果ですが、中々の高評価でした。最初に全てのjsを読むこまないといけないので、Fully Loaded Timeは長いですがページ遷移はすこすこ動きます。

デメリット

WP REST APIでJSONを取得してるので記事一覧を表示するところはやっぱ遅いなという感じでした。axiosを使って読み込んでます。早くする方法を知っていらっしゃる方がいれば教えてください。

ボク個人で作る場合はいいんですが、Vue.jsなどのリアクティブなコードを触ってないデザイナーさんとの協業はなかなか難しそうだなと思いました。VueやReactができてデザインもできるって方は現状少ないかと思います。ググって落ちてる情報も少ないですしね…。

構成

といわけでgithubにソースコードは公開していますが、要点だけ説明します。Nuxt.jsもまだVer0.9.9ですし、あくまでサンプル程度で気になる方は使ってみて下さい。

コンポーネント

ターミナル

$ tree
.
├── components
│   ├── Archives.vue
│   ├── ContactForm.vue
│   ├── Footer.vue
│   ├── Header.vue
│   ├── PageTitle.vue
│   ├── Service.vue
│   └── Slider.vue

上記のコンポーネントを作成しました。大体名前の通りです。難しいことはなにもやっていませんし、レイアウトファイルもdefault.vueのみです。

ページ

ターミナル

$ tree
├── pages
│   ├── about.vue
│   ├── blog.vue
│   ├── contact.vue
│   ├── index.vue
│   └── privacy-policy.vue

作ったのはトップページを含めて5ページですね。

WP REST APIを呼び出すところ

Vue.jsからWP REST APIを呼び出すのをググると何パターンかあったのですが、「vue-resourceの引退について」の記事の通り、vue-resourceを使うのは公式推奨から外れるとのことだったので、おすすめされていたaxiosを使うことにしました。

Archives.vue

<template>
<div class="container-wrap">
<div class="container-row">
<div class="archives" v-loading.body="loading">
<div class="archive" v-for="(post, index) in posts" :key="post.id" v-if="index < 6" >
<a :href="post.link" target="_blank">
<el-card :body-style="{ padding: '0px' }">
<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes['medium'].source_url" class="image">
<div style="padding: 14px;">
<time class="time">{{dateFormat(post.date)}}</time>
<h3>{{post.title.rendered}}</h3>
</div>
</el-card>
</a>
</div>
</div>
</div>
</div>
</template>
 
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
loading: false
}
},
created: function () {
this.getPosts()
},
methods: {
getPosts: function () {
this.loading = true
var app = this
axios.get('https://example.com/wp-json/wp/v2/posts?_embed&filter[posts_per_page]=1')
.then(function (response) {
app.loading = false
app.posts = response.data
})
.catch(function (error) {
console.log(error)
})
},
dateFormat: function (date) {
var dateSplit = date.split('-')
var y = dateSplit[0]
var m = parseInt(dateSplit[1], 10)
var ds = dateSplit[2].split('T')
var d = ds[0]
return y + '.' + m + '.' + d
}
}
}
</script>

ページングとかはやっていないのでその辺のやり方は次の課題にしたいと思います。また単一の記事ページも作りたかったのですが、CSS書くのが大変そうだったのでやめました。これも次の課題にしたいと思います。

詳しいコードはgithubを見て下さい

sho-yamane/nuxt-hp -github

使いまわしてもらって結構なのですが、自己責任でお願いします。WP REST APIのところのコードはご自身のものに変えてくださいね!


作ってみて大変楽しかったのでクライアントワークとかにも取り入れていきたいですが、Nuxt.jsがまだVer0.9.9なのとWP REST APIの読み込みの遅さが気になるな…という感想です。もっといいやり方あるよ!とかあればぜひぜひ教えてください!!

© 2011 - 2017 ShoYamane