How to use Jade template in vue

This article mainly introduces how vue uses Jade template to write html and stylus to write css. The article also mentions the precautions for using jade. Friends who need it can refer to it

Everyday work is used When developing pages and webApps with Vue, I write a lot and want to be lazy and simplify various writing methods, so I use jade to write html and stylus to write css, which saves a lot of steps and improves efficiency.

Installation package

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

Configuration file

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

Comparison before and after using jade

// html 模板
<template>
 <p class=&#39;demo-components&#39;>
 <h2 id="测试标题">测试标题</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>

Notes on using Jade

• Required Briefly understand the basic syntax of jade (it takes 10 minutes to understand it simply)

• template needs to add the lang='jade' attribute

• in the tag Text wrapping will cause parsing errors, and other technical methods need to be used to solve it. Example:

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

stylus Before and after comparison

<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 You can use a minimalist way to write css, and you can also format it Mixing (not recommended in order to maintain a unified format) leaves the parsing task to webpack, and we only need to write simple and easy-to-read code. This is the style and method I like. Of course, sass can also do it. It’s just a personal coincidence that I now use stylus.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What are the methods of using echarts3.0 adaptive in vue?

Questions about this in ES6 arrow functions?

Using the plugin owlcarousel in jQuery slideshow (detailed tutorial)

The above is the detailed content of How to use Jade template in vue. For more information, please follow other related articles on the PHP Chinese website!