nuxtにpugを入れてみた。

nuxtでpugを使ってみました。
インストール方法と、pugの使い方を簡単に記載しています。

pugとは
インストールする
使ってみた
エラー
サンプル

pugとは

HTMLを効率的に書くためのテンプレートエンジンです。
インデントに意味を持たせて、終了タグを省略したり、クラス属性を簡単につけれたり
慣れるとHTMLを書くスピードが上がります。

公式ページ：

Getting Started – Pug

インストールする

yarnを使っているので、下記でインストールしました。
（エラーが発生したので、内容を後述しています）

yarn add pug pug-loader pug-plain-loader

使ってみた

書いてみたコード

<template lang="pug"> 
  v-rows 
    v-col(cols='12') 
      v-card 
        v-card-title Pugで書いてみた 
        v-card-text.font-weight-bold 
          hr.mb-2 
          div pugでいろいろ書いてみるテスト 
          div タグ名.クラスでクラスがつけれる 
          div 属性はタグ名(属性='属性値')でつけれる 
          v-btn(color="primary" @click="clickTest()") 
            span ボタン 
          hr.mt-2.mb-2 
</template> 

<script> 
  import Logo from '~/components/Logo.vue' 
       import VuetifyLogo from '~/components/VuetifyLogo.vue' 

  export default { 
      components: {}, 
      methods: { 
        clickTest: function() { 
          alert("Hello!!"); 
        }   
      },  
  } 
</script>

やっていること

使う時は、templateタグのlang属性に指定して使います。

<template lang="pug">

終了タグは書かずに開始タグだけ書いて、タグの中の要素はインデントします。

  v-rows 
    v-col(cols='12') 
      v-card

上記のように書くと、v-rowsの下にv-colがあって、その下にv-cardがある感じです。
インデントに意味を持っているので、しっかりインデントしないと意図した表示ができません。

チーム内でインデントしない人が出てこないので、
コードが綺麗になって、みやすくなるのでいいですね。

クラスを付与する

タグにクラスをつける時は、タグ名の後ろに「.」を書いてその後にクラス名を書きます。

hr.mt-2.mb-2

上記はhrタグにmt-2, mb-2のクラスを適用しています。

属性の値を設定する

属性値を設定する時は、タグの後ろに「()」で囲んで、属性=”値”で設定します。

v-btn(color="primary" @click="clickTest()")

上記のように書くと、color属性にprimaryを設定しているのと、
@clickでクリックした時のイベントを設定しています。

エラー

pugをyarnインストール際にエラー発生。
xcodeを入れたら解決しました…

gyp: No Xcode or CLT version detected! 
gyp ERR! configure error  
gyp ERR! stack Error: `gyp` failed with exit code: 1 
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/Cellar/node/13.7.0/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16) 
gyp ERR! stack     at ChildProcess.emit (events.js:321:20) 
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) 
gyp ERR! System Darwin 19.3.0