PugでVue.jsを書こう
Pugについては以前ご紹介しています。
関連記事
【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】
IT
Docker
Mac
Node.js
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
準備はたったこれだけです！
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>
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>
めちゃくちゃスッキリしました！
やはり、閉じタグの文化は無くしたいですね・・・！
終わりに
以上のようにコマンド一発で簡単にElectron + Vue-cliの環境へPugの導入が完了しました。
Pugにするメリットは計り知れないので、是非導入してみてください♪