jtk

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 へホストする