一、安装

npm i pug pug-loader

#二、 配置
vue-cli 3 以下版本修改webpack

vue-cli 3 以上版本 是在vue.config.js 里面修改

#三 使用

lang = ‘pug’
. 就是 默认 div 的 class 名

缩进 就是默认 含在 下一级
不用写 类似 结束 标签。 看起来比较简洁。

<template lang='pug'>
.kkkk
  div(class="start common" @mousedown="mousedown($event)" @mousemove="mousemove($event)" @mouseup="mouseup($event)") 我是起点
  div(class="end common"  @mousedown="mousedown($event)" @mousemove="mousemove($event)" @mouseup="mouseup($event)") 我是终点
  svg(width="100%" :height="1600")
    g(data-shape="edge" class="x6-cell x6-edge")
      path(fill="none" pointer-events="none" stroke="#333333" stroke-width="2" stroke-linejoin="round" :d="path" marker-end="url(#marker-v0-1343187251)")
      g(class="x6-edge-labels")
        g(class="x6-edge-label" data-index="0" cursor="default" :transform="trans")
          rect(fill="#fff" rx="3" ry="3" width="32.03125" height="20.015625" transform="matrix(1,0,0,1,-16,-10.8)")
          text(font-size="14" xml:space="preserve" fill="#000" text-anchor="middle" pointer-events="none")
            tspan(dy="0.3em" class="v-line") abcd
</template>