yuheijotaki.com

WordPress + Nuxt.js でポートフォリオサイトを作る その3

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その3

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

作業フォルダを src/階層にまとめる

nuxt.config.js に

export default {
  ...
  srcDir: 'src/',
  ...

を追記して src/ フォルダ作成後、
assets/components/layouts/middleware/pages/plugins/static/store ディレクトリを src/ 以下に移動

参考： API: srcDir プロパティ - NuxtJS

.scss を使う

前回 の sass を使う と同じ方法でOK

.pug を使う

今回は .vue ファイルでテンプレートエンジンとして pug を使ってみようと思うので pug モジュールも追加する。
これもsass loaderと同じでかんたんですね

$ npm i -D pug pug-loader pug-plain-loader

components/Logo.vue

<template lang="pug">
  h1
    nuxt-link(to="/") index
</template>

でできた。

参考： nuxt.js(v2)でpug/stylusを利用する - Qiita

残りやること

  • データ登録・調整
  • 全体スタインリング
  • Netlify へホストする