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>