Comment utiliser le modèle Jade dans vue

Cet article présente principalement comment vue utilise le modèle Jade pour écrire du HTML et le stylet pour écrire du CSS. L'article mentionne également les précautions d'utilisation de Jade. Les amis dans le besoin peuvent s'y référer

Utilisé dans le travail quotidien lors du développement. pages et webApps avec Vue, j'écris beaucoup et je veux être paresseux et simplifier diverses méthodes d'écriture, j'utilise donc jade pour écrire du HTML et un stylet pour écrire du CSS, ce qui permet d'économiser beaucoup d'étapes et d'améliorer l'efficacité.

Pack 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=&#39;value1&#39;,@keydown.enter=&#39;loginIn&#39;)
 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 du texte dans la balise provoquera une erreur d'analyse et d'autres méthodes techniques doivent être utilisées pour la 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 dans un De manière minimaliste, vous pouvez également mélanger les formats (non recommandé afin de conserver un format unifié), et laisser la tâche d'analyse à webpack. Il 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Quelles sont les façons d'utiliser echarts3.0 adaptatif dans vue ?

Des questions à ce sujet dans les fonctions fléchées de l'ES6 ?

Utilisation du plugin Owlcarousel dans le diaporama jQuery (tutoriel détaillé)

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!