首先架構Vue環境

# 最新稳定版
npm install vue
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack myproject
# 安装依赖，走你
cd my-project

執行環境

npm install

npm run dev

安裝支持scss依賴

npm install sass sass-loader node-sass

安裝支持pug依賴

npm install pug pug-loader pug-filters

安裝完成後，進入到/build目錄下，打開webpack.base.conf.js 文件

將红框中的内容添加進文件：

{
  test: /\.scss$/,
  loader: 'style!css!sass?sourceMap'
},
{
  test: /\.jade$/,
  loader: "jade"
},
{
  test: /\.pug$/,
  loader: 'pug'
},

這樣.vue文件就可以支持pug，scss語法了

//使用pug语法
<template lang="pug">
  #app
    img.vue(src="./assets/logo.png")
    Hello
</template>
//使用scss语法
<style lang="scss">
  *{margin:0;padding: 0}
  body{
    background-image: url("/static/images/background.png");
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      img.vue{
        width: 80px;
        height: auto;
      }
    }
  }
</style>

此部落格為個人前端學習記錄
文章皆為參考網路教學，整合成個人學習日記，若有侵權煩請告知，隨時修正。