使用 Pug 和 Stylus 的 Vue 组件示例，以及一些 pug、 stylus 的使用技巧

资源

原文地址 墙外
原文 github 地址
本文 github 地址

正文

主要是搬运了人家的示例代码，这样的写法好处不言而喻

• 运行前需要装一下相应的编译的包

yarn add pug pug-plain-loader stylus stylus-loader --dev

• 主要的源码部分

• 这个还可以和 element-ui 结合使用的哦，示例代码

.mytable
  el-table
    el-table-column(label="日期")
    el-table-column(label="姓名")
    el-table-column(label="地址")

更新一些 pug 的使用语法

1. 在标签中嵌入标签的写法示例

参考教程：标签嵌入

span.title-tooltip 本月即将到期专线 #[span.data-number 5] 条

生成的代码截图

更新一些 stylus 的使用语法

1. 使用 for in 循环设置样式

stylus中文文档 » 插值(Interpolation) » 张鑫旭-鑫空间-鑫生活

• 部分源码示例

        position relative
          for index in 1 2 3 4 5 6 7 8 9 10
            &:nth-child({index})
              &:before
                content '' + index
                position absolute
                left 5px
                width 30px
                height 30px
                line-height 30px
                background-color rgba(247,191,71,0.31);
                border-radius 50%
                text-align center
                color #D0021B
                font-size 16px

• 效果图

页面展示效果

2. 使用 for in 循环设置背景图片（似乎无法在 background 属性中进行 index 的运算，尝试未果）

• 部分源码

          .pillar-filter
            for index in 0 1 2 3
              &>div:nth-child({index + 2})
                .item-title
                  &:before
                    background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-'+ index +'.png') center center no-repeat;

          .dragon-filter
            for index in 4 5 6 7 8
              &>div:nth-child({index - 2})
                .item-title
                  &:before
                    background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-' + index + '.png') 0 center no-repeat;

• 效果图

.pillar-filter

.dragon-filter