So verwenden Sie die Jade-Vorlage in Vue

In diesem Artikel wird hauptsächlich vorgestellt, wie Vue die Jade-Vorlage zum Schreiben von HTML und den Stift zum Schreiben von CSS verwendet. Der Artikel erwähnt auch die Vorsichtsmaßnahmen für die Verwendung von Jade.

Wird bei der täglichen Arbeit verwendet Seiten und WebApps mit Vue, ich schreibe viel und möchte faul sein und verschiedene Schreibmethoden vereinfachen, deshalb verwende ich Jade zum Schreiben von HTML und einen Stift zum Schreiben von CSS, was viele Schritte spart und die Effizienz verbessert.

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=&#39;value1&#39;,@keydown.enter=&#39;loginIn&#39;)
 p {{ oneText + "-" + twoText }}
</template>

Vorsichtsmaßnahmen für die Verwendung von Jade

• Erforderlich Verstehen Sie einfach die grundlegende Syntax von Jade (es dauert 10 Minuten, um sie einfach zu verstehen)

• Vorlage muss das Attribut lang='jade' hinzufügen

• Tag Textumbruch führt zu Analysefehlern und erfordert andere technische Methoden zur Behebung. 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, und Sie können es auch formatieren. Mischen (nicht empfohlen, um ein einheitliches Format beizubehalten) überlässt die Analyseaufgabe dem Webpack, und wir müssen nur einfachen und leicht lesbaren Code schreiben. Das ist der Stil und die Methode, die ich mag. Natürlich kann Sass das auch. Es ist nur ein persönlicher Zufall, dass ich jetzt einen Stift verwende.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Welche Möglichkeiten gibt es, echarts3.0 adaptiv in Vue zu verwenden?

Fragen dazu in ES6-Pfeilfunktionen?

Verwenden des Plugins Owlcarousel in der jQuery-Diashow (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Jade-Vorlage in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!