vue utilise le modèle Jade pour écrire du HTML

vue utilise le modèle Jade pour écrire du HTML et le stylet écrit du CSS

Dans mon travail quotidien, j'utilise vue pour développer des pages et des applications Web. Lorsque j'écris trop, je veux être paresseux et simplifier diverses écritures. méthodes, j'utilise donc jade pour écrire du HTML. Écrire du CSS avec un stylet permet d'économiser de nombreuses étapes et d'améliorer l'efficacité. Package d'installation

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

Fichier de configuration

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

Comparaison avant et après utilisation de 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>

Précautions d'utilisation de Jade

• Vous devez comprendre brièvement la syntaxe de base de jade (cela prend 10 minutes pour la comprendre simplement)

• le modèle doit ajouter l'attribut lang='jade'

• L'habillage linguistique du texte dans les balises entraînera des erreurs d'analyse et d'autres méthodes techniques doivent être utilisées pour les résoudre. Exemple :

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

stylet Comparaison avant et après

<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>

• stylet Vous pouvez écrire du CSS de manière minimaliste, ou vous pouvez mélanger les formats (afin de garder le format uniforme, ce n'est pas recommandé) et laisser la tâche d'analyse à webpack. Il nous suffit d'écrire du code simple et facile à lire. C’est le style et la méthode que j’aime. Bien sûr, l’audace peut aussi le faire. C’est juste une coïncidence personnelle si j’utilise maintenant le stylet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!