Vue.js製のポートフォリオサイトをPugで書き換えました
Vue.jsでポートフォリオサイト制作記 という技術系同人誌で解説したサイトを Pug で書き換えてみました。
リポジトリは以下。
解説本はこちら。※ Pug で書き換える前に書いたものです。
動作確認・作業環境
この記事の前提条件
- vue-cli を使って webpack の環境を用意した状態
事前準備
プロジェクトのディレクトリに移動
※$マークは入力しなくてよいです。ターミナル操作の意味です。
$ cd www/shirokuma
pug と pug-loader をインストール。pug-loader は webpack で変換するためのパッケージです。
$ npm i -D pug pug-loader
Brackets に Pug のエクステンションを追加
修正する
変更するのは vue ファイル。
<template>
タグを<template lang="pug">
と修正する。
Pugの書き方の例
■ 例1:変更前(HTML)
<header> <h1 class="site-title"><router-link to="/">サイトのタイトル</router-link></h1> </header>
header 要素の部分です。HTMLで見かけない router-link は vue-router のタグで、リンクの役割があります。
これは以下のように書き換えられます。
■ 例1:変更後(Pugでの記述)
header h1.site-title router-link(to="/") サイトのタイトル
ちょっと見づらいかもしれません…!
- 終了タグが不要
- タグの<>が不要
- インデントで入れ子を表現する
- classの指定は.(ドット)ドットの前には半角スペースは不要。つなげて書く。
- idの指定は#(シャープ)
id="top"
なら#top
と書く。シャープの前に半角スペース不要。 - 他の属性は( )かっこで括る
- Vue.js 独自のタグも同様に書ける
その他の修正はリポジトリの shirokuma/App.vue at master · becolomochi/shirokuma · GitHub を参考にしてもらいたいのですが、以下のように書き換えました。インデントは半角スペース2個にしています。
■ 例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>
■ 例2:Pug に変更した後
<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>
.sns-box
のように、class や id を付与した div 要素の場合は、div を省略して書くことができます。
最後に
Pug の記述方法で難しいなと感じた点を挙げておきます。
- インデントを気にする点
- 普通のテキスト中に span タグや a タグが混ざるときにどう書くか一瞬戸惑う
- 入れ子しまくりでインデントが多い場合
- 内容が多い場合
- 複数人でコードを書いたり修正する場合(見づらそう
個人で自由に使うときだけ使おうかな〜と思っています。
参考
- Pug 公式 記述方法など
- vue.jsでpugとpostcssつかう - Qiita Vue.js で使う場合のインストールするパッケージを参考にさせていただきました。
べころもち工房 Works
フリーランスとして仕事を始めました
2018年4月よりお仕事募集中です。内容は HTML/CSS/JS のコーディングやイラスト作成です。 お問合わせは Twitter からどうぞ。
Web 技術系同人誌
Vue.js の SPA でポートフォリオサイトを作ったときの制作記。HTML/CSSがひと通りわかっていて、JSが少し書ける方向けです。