VUE中的pug使用

最新推荐文章于 2025-06-05 16:11:58 发布

原创最新推荐文章于 2025-06-05 16:11:58 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

看看就行多练练就会了加油哦

文章标签：

#vue

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

pug

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和配置Pug（Jade），包括安装pug及相关loader，修改配置文件，并展示了如何在模板中使用Pug语法，如设置样式和处理class属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 pug
   npm i -D pug-html-loader pug-plain-pug
   #安装支持pug依赖
   npm install pug pug-loader pug-filters -D
   #安装支持jade依赖
   npm install jade jade-loader -D
   pug ：安装pug
   pug-loader：pug的loader
   pug-cli：pug 编译工具
   pug-filters：pug的过滤器

修改脚手架里面的文件
   config.js
       module.exports = {
           rules:[ {
           test: /\.pig$/ ,
           loader : " pug-html-loader "
           } ]
       }
template lang = "pug"

li(style = {color:'red',fontSize:'30px'}) {{num}}
这个里面类似的 font - size 可以写成 fontSize

- var classes = ['foo', 'bar', 'baz']
a(class=classes) classes 里面可以写成 class

input框旁边如何跟文本

<template lang="pug">
div.title
    ul
        li(style = {color:'red',fontSize:'30px'}) {{num}}
        li 
            a(href="baidu.com") 百度
        |
        li
            a(href="baidu.com") 百度2
        li
            input( 
                type='checkbox'
                name="一个三"
                checkbox
            )
            | input框
        li
            - var classes = ['.foo' , '.cor']
            p(class='classes') 这个是一个P标签
    a.btnt(href="baidu.com") class名字为btnt的标签并且可以跳转
    #conten
        p #conten 可以直接生成一个iD为 conten的div标签
    - var fuzhi = {}
    fuzhi.class = 'bab'
    div#bab(data-bar="foo")&attributes(fuzhi)
            
</template>
<script>
export default {
    data() {
        return {
            num:'你好啊11111'
        }
        
    },
}
</script>
<style lang="sass">
*
    list-style: none
    padding: 0
    margin: 0
.foo
    font-size: 30px
.cor
    color: red
.btnt
    color: red
    font-size: 30px
#conten
    width: 100px
    height: 100px
    border: 1px solid red
</style>

<template lang="pug">
div.title
    p
        |这个是一个P标签
        |这句话换行了
    p 
        |一个
    ul
        li item A
        li item B
        li item c
    img(src="")
    p.
        一个P标签写什么#[em 东西]   
</template>
//- 补一个