vue-cli项目中使用less && pug

vue-cli 构建的项目默认是不支持 less和pug 的，需要自己添加。

vue-cli项目添加Less

1.安装 less 和 less-loader

npm install less less-loader --save-dev

2.webpack.base.conf.js中添加规则

打开 build/webpack.base.conf.js
在 module.exports = 的对象的 module.rules 后面添加一段

module.exports = {
    //  此处省略其他的内容
    module: {
        rules: [
          //  此处省略其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

3.在单文件组件中的 style 标签中 加上 lang="less" 属性

<style scoped lang="less">
@import '~@/assets/less/color';
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .44rem;
  padding: 0 .16rem;
  background: @main;
  font-size: .18rem;
  color: #fff;
}
...
</style>

vue-cli项目添加Pug

1.安装 pug

npm install pug --save-dev

2.在单文件组件中的 template 模版中 加上 lang="pug" 属性

<template lang="pug">
  .header
    .left(@click.stop="$emit('clickBack')")
      i.iconfont &#xe619;
    .title(v-text="title")
    .right(v-html="right")
</template>