vue verwendet die Jade-Vorlage zum Schreiben von HTML

Vue verwendet die Jade-Vorlage zum Schreiben von HTML und der Stift schreibt CSS.

Bei meiner täglichen Arbeit verwende ich Vue zum Entwickeln von Seiten und WebApps. Wenn ich zu viel schreibe, möchte ich faul sein und verschiedene Schreibvorgänge vereinfachen Daher verwende ich Jade zum Schreiben von HTML. Das Schreiben von CSS mit einem Stift spart viele Schritte und verbessert die Effizienz. Installationspaket

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

Konfigurationsdatei

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

Vergleich vor und nach der Verwendung von 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>

Vorsichtsmaßnahmen für die Verwendung von Jade

• Sie müssen kurz die grundlegende Syntax von Jade verstehen (es dauert 10 Minuten, um sie einfach zu verstehen)

• Vorlage muss das lang='jade'-Attribut

  hinzufügen

• Zeilenumbruch von Text innerhalb von Tags führt zu Parsing-Fehlern und es müssen andere technische Methoden verwendet werden, um diese zu beheben. Beispiel:

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

Stylus Vorher-Nachher-Vergleich

<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 Sie können CSS auf minimalistische Weise schreiben, oder Sie können Mischen Sie Formate (Um ein einheitliches Format beizubehalten, wird dies nicht empfohlen) und überlassen Sie die Analyseaufgabe dem Webpack. Wir müssen nur einfachen und leicht lesbaren Code schreiben. Das ist der Stil und die Methode, die ich mag. Natürlich kann Sass es auch. Es ist nur ein persönlicher Zufall, dass ich jetzt einen Stift verwende.

Das obige ist der detaillierte Inhalt vonvue verwendet die Jade-Vorlage zum Schreiben von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!