投稿日： 2019年9月11日
最終更新日： 2023年3月28日

【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】

YouTubeも見てね♪

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥3,279 (2025/01/05 12:33:41時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

1 PugでVue.jsを書こう
2 手順
- 2.1 vue-cli-plugin-pugの導入
- 2.2 HTMLをpug記法に変更
  - 2.2.1 HTLM(修正前)
  - 2.2.2 Pug(修正後)
3 終わりに

PugでVue.jsを書こう

Pugについては以前ご紹介しています。

参考

【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

今回はVue-cliを利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。

手順

vue-cli-plugin-pugの導入

まずは例の如く、vue-cliにてpug-pluginを追加しましょう。

📦  Installing vue-cli-plugin-pug...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 31 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-pug@1.0.7
info All dependencies
├─ @types/babel-types@7.0.7
├─ @types/babylon@6.16.5
├─ acorn-globals@3.1.0
├─ align-text@0.1.4
├─ asap@2.0.6
├─ center-align@0.1.3
├─ character-parser@2.2.0
├─ doctypes@1.1.0
├─ is-expression@3.0.0
├─ jstransformer@1.0.0
├─ lazy-cache@1.0.4
├─ longest@1.0.1
├─ promise@7.3.1
├─ pug-attrs@2.0.4
├─ pug-code-gen@2.0.2
├─ pug-filters@3.1.1
├─ pug-lexer@4.1.0
├─ pug-linker@3.0.6
├─ pug-load@2.0.12
├─ pug-parser@5.0.1
├─ pug-plain-loader@1.0.0
├─ pug-strip-comments@1.0.4
├─ pug@2.0.4
├─ raw-loader@0.5.1
├─ right-align@0.1.3
├─ token-stream@0.0.1
├─ uglify-to-browserify@1.0.2
├─ void-elements@2.0.1
├─ vue-cli-plugin-pug@1.0.7
├─ window-size@0.1.0
└─ with@5.1.1
$ electron-builder install-app-deps
  • electron-builder  version=21.2.0
✨  Done in 7.33s.
✔  Successfully installed plugin: vue-cli-plugin-pug

Plugin vue-cli-plugin-pug does not have a generator to invoke

📦 Installing vue-cli-plugin-pug...

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 31 new dependencies.

info Direct dependencies

└─ vue-cli-plugin-pug@1.0.7

info All dependencies

├─ @types/babel-types@7.0.7

├─ @types/babylon@6.16.5

├─ acorn-globals@3.1.0

├─ align-text@0.1.4

├─ asap@2.0.6

├─ center-align@0.1.3

├─ character-parser@2.2.0

├─ doctypes@1.1.0

├─ is-expression@3.0.0

├─ jstransformer@1.0.0

├─ lazy-cache@1.0.4

├─ longest@1.0.1

├─ promise@7.3.1

├─ pug-attrs@2.0.4

├─ pug-code-gen@2.0.2

├─ pug-filters@3.1.1

├─ pug-lexer@4.1.0

├─ pug-linker@3.0.6

├─ pug-load@2.0.12

├─ pug-parser@5.0.1

├─ pug-plain-loader@1.0.0

├─ pug-strip-comments@1.0.4

├─ pug@2.0.4

├─ raw-loader@0.5.1

├─ right-align@0.1.3

├─ token-stream@0.0.1

├─ uglify-to-browserify@1.0.2

├─ void-elements@2.0.1

├─ vue-cli-plugin-pug@1.0.7

├─ window-size@0.1.0

└─ with@5.1.1

$ electron-builder install-app-deps

• electron-builder version=21.2.0

✨ Done in 7.33s.

✔ Successfully installed plugin: vue-cli-plugin-pug

Plugin vue-cli-plugin-pug does not have a generator to invoke

準備はたったこれだけです！

HTMLをpug記法に変更

あとは、Pug記法に沿ってHTMLをリファクタリングしていけば良いです。

HTLM(修正前)

<template>
  <q-layout view="lHr LpR lFr">
    <q-drawer show-if-above v-model="left" side="left" bordered content-class="bg-grey-10">
      <q-list class="q-pt-md text-white">
        <q-item-label header>Tools</q-item-label>
        <q-expansion-item
          class="q-mt-md q-mr-sm"
          expand-separator
          icon="code"
          label="Code"
          caption="Code Operation"
          dark
        >
          <q-item to="/code/formatter" exactx class="q-ml-md">
            <q-item-section avatar>
              <q-icon name="format_indent_decrease" />
            </q-item-section>
            <q-item-section>
              <q-item-label>Formatter</q-item-label>
            </q-item-section>
            <q-tooltip
              anchor="center right"
              :delay="500"
              :offset="[0, 10]"
              transition-show="rotate"
              transition-hide="rotate"
            >
              Format Code.
              <br />HTML/SQL/JSON
            </q-tooltip>
          </q-item>
          <q-item to="/code/mdEditor" exact class="q-ml-md">
            <q-item-section avatar>
              <q-icon name="img:img/logos/markdown.svg" />
            </q-item-section>
            <q-item-section>
              <q-item-label>MD Editor</q-item-label>
            </q-item-section>
            <q-tooltip
              anchor="center right"
              :delay="500"
              :offset="[0, 10]"
              transition-show="rotate"
              transition-hide="rotate"
            >MardDown Editor</q-tooltip>
          </q-item>
        </q-expansion-item>
        <q-item to="/internet" exactx>
          <q-item-section avatar>
            <q-icon name="img:img/logos/internet.svg" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Internet</q-item-label>
          </q-item-section>
          <q-tooltip
            anchor="center right"
            :delay="500"
            :offset="[0, 10]"
            transition-show="rotate"
            transition-hide="rotate"
          >Internet Browsing</q-tooltip>
        </q-item>
      </q-list>
    </q-drawer>

    <q-drawer show-if-above v-model="right" side="right" bordered>
      <q-img
        class="absolute-top"
        src="https://cdn.quasar.dev/img/material.png"
        style="height: 150px"
      >
        <div class="absolute-bottom bg-transparent">
          <q-avatar size="56px" class="q-mb-sm">
            <img src="img/logos/blogenist-logo.svg" />
          </q-avatar>
          <div class="text-weight-bold">Blogenist</div>
          <div>@blgenist</div>
        </div>
      </q-img>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  name: "LayoutDefault",
  data() {
    return {
      left: false,
      right: false
    };
  }
};
</script>

<q-layout view="lHr LpR lFr">

<q-drawer show-if-above v-model="left" side="left" bordered content-class="bg-grey-10">

<q-list class="q-pt-md text-white">

<q-item-label header>Tools</q-item-label>

<q-expansion-item

class="q-mt-md q-mr-sm"

expand-separator

icon="code"

label="Code"

caption="Code Operation"

dark

<q-item to="/code/formatter" exactx class="q-ml-md">

<q-item-section avatar>

<q-icon name="format_indent_decrease" />

</q-item-section>

<q-item-section>

<q-item-label>Formatter</q-item-label>

</q-item-section>

<q-tooltip

anchor="center right"

:delay="500"

:offset="[0, 10]"

transition-show="rotate"

transition-hide="rotate"

Format Code.

<br />HTML/SQL/JSON

</q-tooltip>

</q-item>

<q-item to="/code/mdEditor" exact class="q-ml-md">

<q-item-section avatar>

<q-icon name="img:img/logos/markdown.svg" />

</q-item-section>

<q-item-section>

<q-item-label>MD Editor</q-item-label>

</q-item-section>

<q-tooltip

anchor="center right"

:delay="500"

:offset="[0, 10]"

transition-show="rotate"

transition-hide="rotate"

>MardDown Editor</q-tooltip>

</q-item>

</q-expansion-item>

<q-item to="/internet" exactx>

<q-item-section avatar>

<q-icon name="img:img/logos/internet.svg" />

</q-item-section>

<q-item-section>

<q-item-label>Internet</q-item-label>

</q-item-section>

<q-tooltip

anchor="center right"

:delay="500"

:offset="[0, 10]"

transition-show="rotate"

transition-hide="rotate"

>Internet Browsing</q-tooltip>

</q-item>

</q-list>

</q-drawer>

<q-drawer show-if-above v-model="right" side="right" bordered>

<q-img

class="absolute-top"

src="https://cdn.quasar.dev/img/material.png"

style="height: 150px"

<q-avatar size="56px" class="q-mb-sm">

</q-avatar>

<div class="text-weight-bold">Blogenist</div>

<div>@blgenist</div>

</div>

</q-img>

</q-drawer>

<q-page-container>

<router-view />

</q-page-container>

</q-layout>

</template>

export default {

name: "LayoutDefault",

data() {

return {

left: false,

right: false

};

}

};

</script>

Pug(修正後)

<template lang="pug">
  q-layout(view='lHr LpR lFr')
    q-drawer(show-if-above='' v-model='left' side='left' bordered='' content-class='bg-grey-10')
      q-list.q-pt-md.text-white
        q-item-label(header='') Tools
        q-expansion-item.q-mt-md.q-mr-sm(expand-separator='' icon='code' label='Code' caption='Code Operation' dark='')
          q-item.q-ml-md(to='/code/formatter' exactx='')
            q-item-section(avatar='')
              q-icon(name='format_indent_decrease')
            q-item-section
              q-item-label Formatter
            q-tooltip(anchor='center right' :delay='500' :offset='[0, 10]' transition-show='rotate' transition-hide='rotate')
              | Format Code.
              br
              | HTML/SQL/JSON
          q-item.q-ml-md(to='/code/mdEditor' exact='')
            q-item-section(avatar='')
              q-icon(name='img:img/logos/markdown.svg')
            q-item-section
              q-item-label MD Editor
            q-tooltip(anchor='center right' :delay='500' :offset='[0, 10]' transition-show='rotate' transition-hide='rotate') MardDown Editor
    q-drawer(show-if-above='' v-model='right' side='right' bordered='')
      q-img.absolute-top(src='https://cdn.quasar.dev/img/material.png' style='height: 150px')
        .absolute-bottom.bg-transparent
          q-avatar.q-mb-sm(size='56px')
            img(src='img/logos/blogenist-logo.svg')
          .text-weight-bold Blogenist
          div @blogenist
    q-page-container
      router-view
</template>

<script>
export default {
  name: "LayoutDefault",
  data() {
    return {
      left: false,
      right: false
    };
  }
};
</script>