vue中使用pug 和 stylus

pug的使用

先安装node环境

（1）安装支持pug依赖：npm install pug pug-loader pug-filters -D

（2）安装支持jade依赖：npm install jade jade-loader -D

（3）在webpack.base.conf，在module的rules节点下添加如下配置：

{
      test: /\.jade$/,
      loader: "jade"
},
{
      test: /\.pug$/,
      loader: 'pug'
}

stylus的使用

cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev

安装后设置lang为stylus即可

<template lang="pug">
    div.box
      ul.wrap
        li.item(v-text="msg" v-if="index > 2" v-for="(item,index) in 5" :key="index")
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.box {
  .wrap {
    .item {
      color: red;
    }
  }
}
</style>

显示如下：