ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
スポンサーリンク
PugでVue.jsを書こう
Pugについては以前ご紹介しています。
今回はVue-cliを利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。
手順
vue-cli-plugin-pugの導入
まずは例の如く、vue-cliにてpug-pluginを追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
📦 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(修正前)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<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(修正後)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<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にするメリットは計り知れないので、是非導入してみてください♪
Travenist
Otakenist
