vue는 Jade 템플릿을 사용하여 HTML을 작성합니다.

vue는 Jade 템플릿을 사용하여 html을 작성하고 스타일러스를 사용하여 css를 작성합니다

일상 업무에서는 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='value1',@keydown.enter='loginIn')
        p {{ oneText + "-" + twoText }}
</template>

Jade 사용 시 주의 사항

• jade의 기본 구문을 간략하게 이해해야 합니다(간단히 이해하는 데 10분 소요)

• template 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를 작성할 수도 있고, 형식을 혼합할 수도 있고(통합 형식을 유지하기 위해 권장되지 않음) 구문 분석 작업을 남길 수도 있습니다. 우리는 간단하고 읽기 쉬운 코드를 작성합니다. 이것이 제가 좋아하는 스타일이자 방법입니다. 물론 sass도 가능합니다. 제가 지금 스타일러스를 사용하는 것은 단지 개인적인 우연일 뿐입니다.

위 내용은 vue는 Jade 템플릿을 사용하여 HTML을 작성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!