素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

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

投稿日:

スポンサーリンク

336×280




PugでVue.jsを書こう

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

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

手順

vue-cli-plugin-pugの導入

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

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

HTMLをpug記法に変更

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

HTLM(修正前)

Pug(修正後)

めちゃくちゃスッキリしました!

やはり、閉じタグの文化は無くしたいですね・・・!

本日のおすすめ商品

終わりに

以上のようにコマンド一発で簡単にElectron + Vue-cliの環境へPugの導入が完了しました。

Pugにするメリットは計り知れないので、是非導入してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist