Vue에서 Jade 템플릿을 사용하는 방법

이 글에서는 주로 Vue가 Jade 템플릿을 사용하여 HTML을 작성하고 스타일러스를 사용하여 CSS를 작성하는 방법을 소개합니다. 또한 Jade를 사용할 때의 주의사항도 언급되어 있습니다. 필요한 친구는 이를 참고할 수 있습니다.

일상 작업에서는 Vue를 사용하여 페이지와 웹앱을 개발합니다. 글을 너무 많이 써서 게으르고 다양한 글쓰기 방법을 단순화하고 싶어서 jade를 사용하여 html을 작성하고 스타일러스를 사용하여 css를 작성하는데, 이는 많은 단계를 절약하고 효율성을 향상시킵니다.

설치 패키지

// 安装jade包
npm install jade jade-loader --save-dev
// 如果使用vue-cli构建项目，则不需要安装stylus相关的包，vue-cli默认已安装
npm install stylus stylus-loader --save-dev

구성 파일

// webpack.base.conf.js 配置
// jade
{
 test : /\.jade$/,
 loader : 'jade-loader',
}
// stylus 如果使用vue-cli构建，无需配置此项
{
 test : /\.styl$/,
 loader : 'stylus-loader',
}

jade 전후 비교

// html 模板
<template>
 <p class=&#39;demo-components&#39;>
 <h2>测试标题</h2>
 <p>
  <span class=&#39;text&#39;>这是一条测试的demo文本</span>
  <i class=&#39;icon&#39;></i>
 </p>
 <input v-model=&#39;value1&#39; @keydown.enter=&#39;loginIn&#39;>
 <p>{{ oneText + "-" + "twoText" }}</p>
 </p>
</template>
// jade 模板
<template lang=&#39;jade&#39;>
 p.demo-components
 h2 测试标题
 p
  span.text 这是一条测试的demo文本
  i.icon
 input(v-model=&#39;value1&#39;,@keydown.enter=&#39;loginIn&#39;)
 p {{ oneText + "-" + twoText }}
</template>

Jade 사용 시 주의사항

• 에 대한 간단한 이해가 필요합니다. jade 기본 구문 (간단히 이해하는데 10분 소요)

• 템플릿에 lang='jade' 속성 추가 필요

• 태그에 텍스트 줄 바꿈으로 인해 파싱 오류가 발생할 수 있으며 기타 기술적 방법이 필요함 그것을 해결하는데 사용되었습니다. 예:

<template lang=&#39;jade&#39;>
 p
 p 我是测试文本哇,可是文本太长需要换行啊，我恰巧回车试一
  下啊，啊呀，报错啦！！
</template>
// 可以写进一个变量里、或方法中返回数据、或保持一行不换行

stylus 전후 비교

<style lang=&#39;css&#39;> // css less sass scss 样式demo此处省略

// stylus demo
<style lang=&#39;stylus&#39;>
 .main-body
 width 300px
 heihgt 200px
 background-color rgba(0,0,0,1)
 .main-model
  width 50px
  height 50px
  margin 20px auto
</style>

stylus 최소한의 방식으로 CSS를 작성할 수도 있고, 형식을 혼합할 수도 있고(통합 형식을 유지하기 위해 권장되지 않음) webpack에 대한 구문 분석 작업을 수행하려면 간단하고 읽기 쉬운 코드만 작성하면 됩니다. 이것이 제가 좋아하는 스타일이자 방법입니다. 물론 sass도 가능합니다. 제가 지금 스타일러스를 사용하는 것은 단지 개인적인 우연일 뿐입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 echarts3.0 적응형을 사용하는 방법은 무엇입니까?

ES6 화살표 함수에 대해 궁금한 점이 있으신가요?

jQuery 슬라이드쇼에서 플러그인 owlcarousel 사용하기(자세한 튜토리얼)

위 내용은 Vue에서 Jade 템플릿을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!