【Nuxt.js】VueファイルのPugテンプレートをHTMLに変換する方法
Nuxt.jsでtemplate部分をpugで記述していたのですがHTMLに書き換えたときのメモです。
なぜやめるのか?
やめた理由はeslint-plugin-vueが効かないからです。
これにより書き方に統一感がなくエラーも自力で発見しないといけないなどもろもろの問題が見えてきました。
他にもソースのサンプルがだいたいHTMLで書かれている、
pugでできることはだいたいvueでもできるなどから
pugからHTMLにすることにしました。
どうやって書き換えるのか?
こちらのツールを利用しました。
vue-pug-to-htmlというのがもともとあったようなのですが
- Jadeにも対応
- テンプレートエンジンのオプションに doctype を指定する
- タグの属性中の HTML Entities の変換
を拡張してくれています。
pug-to-htmlをインストール
npm
npm i -g @plaidev/pug-to-html
yarn
yarn global add @plaidev/pug-to-html
※どちらもglobalにインストールしてください。
yarn add @plaidev/pug-to-html
でインストールしたら動かなかったので
pug-to-htmlを使ってみる
例: Topのindex.vueを変換するとき
$ pugToHtml pages/index.vue
こちらのcmdを打つと
templateのpugからHTMLに変換してくれます。
一括変換したい。
こちらでpagesディレクトリ以下のvueファイルを一括で変換してくれます。
$ find ./pages -name "*.vue" | xargs -I {} pugToHtml {}
変換させたくファイルがある時
pagesディレクトリのtestフォルダ内は変換したいという場合はこんな風にcmsを打ち込みます。
$ find ./pages -name "*.vue" -not -path "/pages/test/*" | xargs -I {} pugToHtml {}
※こちらはpages配下の分だけなのでcomponents配下の分も必要なら変換しておいてください。
変換後の後処理
無事変換ができたら各vueファイルにESLINTが走り赤波のエラーや黄色波のwarnがでてくるので
それぞれを修正していきます。
※VS Codeを使っている場合の話です。
黄色波のところにカーソルを合わせれば電球マークが表示するのでそこから
Fix all auto-fixable problems
を選択すれば一括で自動修正してくれます。
以上でpugからHTMLに変換できました。
参考:
Author And Source
この問題について(【Nuxt.js】VueファイルのPugテンプレートをHTMLに変換する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/hiroyukiwk/items/637639a20127c1783596著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .