Nuxt.js에서 template 부분을 pug로 기술하고 있었지만 HTML로 다시 작성했을 때의 메모입니다.

왜 그만?

그만한 이유는 eslint-plugin-vue가 작동하지 않기 때문입니다.
이것에 의해서 쓰는 방법에 통일감이 없고 에러도 자력으로 발견하지 않으면 안 되는 등 여러가지 문제가 보아 왔습니다.

그 밖에도 소스의 샘플이 대체로 HTML로 쓰여져 있으며,
pug에서 할 수있는 일은 대체로 vu에서 할 수 있습니다.
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 부하의 분도 필요하면 변환해 주세요.

변환 후 후처리

무사 변환이 가능하면 각 vu 파일에 ESLINT가 달려 적파의 에러나 노란 파의 warn이 나오므로
각각을 수정하겠습니다.

※VS Code를 사용하고 있는 경우의 이야기입니다.





노란색 파도에 커서를 맞추면 전구 마크가 표시되므로 거기에서Fix all auto-fixable problems 를 선택하면 일괄적으로 자동 수정해 줍니다.

이상으로 pug에서 HTML로 변환할 수 있었습니다.

참고: