htmlの閉じたタグや「class=」などを書くのが嫌だと思ったことはありませんか。
nuxtでプロジェクトを作る上では、html、cssでコーディングを行うのもありですが、pugとstylusを使ったほうがコードもスッキリする上に、同じことをなんかいも書かなくていいので効率が上がります。
nuxtにstylusを入れる方法はこちら
![](http://pg-log.com/wp-content/uploads/2021/08/matthew-henry-6x-hVXXiBxs-unsplash-scaled.jpg)
環境とバージョンについて
- mac OS 11.2.3
- エディタ VSCode
- node v14.8.0
https://nodejs.org/ja/ - npm 6.14.7
https://www.npmjs.com/>
![](http://pg-log.com/wp-content/uploads/2021/08/undraw_My_answer_re_k4dv.png)
nuxtにpugを入れる方法
npm i --save-dev pug pug-plain-loader
上記のコマンドだけで使えるようになります。
あとは「.vue」ファイル内でlangの設定をして上げるだけです。
サーバーを立ち上げて表示れていればOKです。
バージョンが違うなどでうまく行かないときもあるかもしれません。
![](http://pg-log.com/wp-content/uploads/2021/08/website.png)
pugで忘れがちな記述について
改行
p テキストテキスト
br
| 改行テキスト
span spanタグ
br
| 改行テキスト
上記の記述で下記のようなhtmlになります。
テキストテキスト
改行テキストspanタグ
改行テキスト
コメント
pugのコメントにはhtmlに書き出しされるコメントと表示されないコメントがあります。
記述方法は下記になります。
//- Pug
// これはHTMLに表示されるコメントです
//- これはHTMLに表示されないコメントです
上記をコンパイルをすると下記の記述になります。
![](http://pg-log.com/wp-content/uploads/2021/08/special-occasion.png)
最後に
効率よくコーディングを行うのにpugはかなり役に立つと思います。
なれてしまえば、htmlでコーディングを行うのはかなり面倒なるのできをつけてくださいwww
また、sassやstylusなどは使われていることが多いですが、pugに関してはあまり使われていないので、自分はできるけど他の人はできないなどといったことになるかもしれません。
![](http://image.moshimo.com/af-img/3162/000000051692.png)
コメント