べこのツボ

これ押すとアイデアが出てくる(理想)

Vue.js製のポートフォリオサイトをPugで書き換えました

f:id:damdom:20171105234655p:plain

最近個人的に使い始めた Pug(パグ)、記述量が減って内容を修正しやすくて重宝しています。
Vue.jsでポートフォリオサイト制作記 という技術系同人誌で解説したサイトも Pug に書き換えました。

個人的にまだ慣れない点として、

  • インデントを気にする点
  • 普通のテキスト中に span タグや aタグが混ざるときにどう書くか
  • for 文(まだまだ使える気がしない

のようなことがありますが、終了タグを気にせずに済む点や記述量が減る点がかなり良いです。

動作確認・作業環境

この記事の前提条件

  • vue-cli を使って webpack の環境を用意した状態

事前準備

プロジェクトのディレクトリに移動
※$マークは入力しなくてよいです。ターミナル操作の意味です。

 $ cd www/shirokuma

pug と pug-loader をインストール。pug-loader は webpack で変換するためのパッケージです。

 $ npm i -D pug pug-loader

Brackets に Pug のエクステンションを追加

  1. Brackets を起動して、「ファイル」→「拡張機能マネージャー...」をクリック
  2. pug で検索→追加

修正する

変更するのは vueファイル。 <template> タグを<template lang="pug"> にして、Pug で書きますと宣言。

  • 終了タグ不要
  • タグの<>が不要
  • インデントで入れ子を表現する
  • クラスの指定は.(ドット)idの指定は#(シャープ)
  • 他の属性は( )かっこで括る
  • Vue 独自のタグも同様に書ける様子

Pugの書き方の例

変更前(HTML)

      <header>
        <h1 class="site-title"><router-link to="/">サイトのタイトル</router-link></h1>
      </header>

変更後(Pugの記述)

      header
        h1.site-title
          router-link(to="/") サイトのタイトル

と、このような感じで書いていきます。 ※router-link は vue-router のタグ。 ※webpack で変換されて最終的に変更前の HTML と同じになってしまいますが、今後の更新のしやすさを考えて書き直しました。

後はリポジトリ

shirokuma/App.vue at master · becolomochi/shirokuma · GitHub を参考にしてもらいたいのですが、以下のような感じで書き換えました。インデント1個分は半角スペース2個にしています。

変更前の template タグの中

<template>
  <div id="app">
    <div class="header-outer" id="sticky">
      <header>
        <h1 class="site-title"><router-link to="/">becolomochi's portfolio</router-link></h1>
      </header>
      <hnav></hnav>
    </div>
    <transition name="fade">
      <router-view :data="myData"></router-view>
    </transition>
    <fnav></fnav>
    <div class="sns-box">
      <a href="https://twitter.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-github"></i></a>
      <a href="https://becolomochi.tumblr.com" target="_blank" class="sns-link"><i class="fa fa-tumblr"></i></a>
    </div>
    <footer>
      <div class="copyright-box">© 2017 beco</div>
    </footer>
  </div>
</template>

変更後の template タグの中

<template lang="pug">
  #app
    .header-outer#sticky
      header
        h1.site-title
          router-link(to="/") becolomochi's portfolio
      hnav
    transition(name="fade")
      router-view(:data="myData")
    fnav
    .sns-box
      a(href="https://twitter.com/becolomochi" target="_blank").sns-link
        i.fa.fa-twitter
      a(href="https://github.com/becolomochi" target="_blank").sns-link
        i.fa.fa-github
      a(href="https://becolomochi.tumblr.com" target="_blank").sns-link
        i.fa.fa-tumblr
    footer
      .copyright-box © 2017 beco
</template>

最後に

  • 掲載できる作品を増やしたいです……

お知らせ

本はこちらです。

booth.pm

ぼちぼち図解のお仕事を募集しています。
「本作りたいけど図を書くのがなあ〜」という方、ゆる〜い図解でかわいみと親しみを増やしませんか。
絵柄は本当にこんな感じのしか書けません。初心者向けが合うと思います。
料金なども考え始めていますが、現状は知り合いの方優先で。。。年明け以降からやっていきます。

参考