1. 前情提要

簡介摘抄

(1) Vue.js

Vue.js（讀音 /vjuː/，類似於 view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。

(2) Webpack

webpack 是一個現代 JavaScript 應用程式的模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成少量的 bundle - 通常只有一個，由瀏覽器載入。

通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。

(3) Sass

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式檔案，以及更高效地開發專案。

(4) Jade(pug)

Jade 是一個高效能的模板引擎，它深受 Haml 影響，它是用 JavaScript 實現的，並且可以供 Node 使用。

注：Jade已更名為pug，但jade之前的版本依舊可以使用

2. Pre-work

通過命令列note -v 可以檢視node.js的版本號。
Vue.js需要Node版本在4.0.0以上，詳見之前的博文 Vue.js入門 - 安裝

3. 搭建

• 全域性安裝 vue-cli
• 建立一個基於 webpack 模板的新專案
• 安裝依賴
• 執行

4. 擴充套件Sass和Jade(Pug)

由於習慣於用jade，在實際構建中，我並未安裝pug。讀者可根據實際情況，選擇pug或者jade安裝。

(1) 安裝依賴

【Pug】

npm install pug pug-loader pug-filters -D

【Jade】

npm install jade jade-loader -D

【Sass】

npm install sass sass-loader node-sass -D

(2) 修改config

在工程目錄下找到build資料夾，開啟webpack.base.conf.js檔案。
加入以下配置：

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

(3) 測試

工程目錄下src -> components -> Hello.vue 修改為

<!------html------->
<!--加上【lang="jade"】屬性-->
<template lang="jade">
    div.hello
        h1 hello
        p {{msg}}
</template>

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

<!------css------->
<!--加上【lang='sass'】屬性-->
<style lang='sass'>
h1
  color: red
</style>

5. 番外

按照上文es6還是要報錯，需根據下文定義type="es6"

依舊未解決sass顯示問題，scss沒問題