vue+webpack+scss+jade(pug)的環境搭建

標籤：vue,webpack,jade,scss
聲明：轉載須經本人贊成
這篇博客就聊一聊如何用webpack搭建vue2.0的環境，以及拓展了下如何在搭建好的環境中使用scss以及pug（jade），廢話很少說，直接進入主題。

第一步 準備工做

1.1首先要保證本身的環境中安裝了node.js，咱們能夠經過命令行node -v查看

若是出現版本號，說明已經安裝成功了。我這裏的node版本是7.0.0，建議你們不要使用過老的版本。若是顯示node: command not found則須要安裝node，你們直接在node的官網下載安裝就行了
1.2安裝了node之後咱們就可使用npm包管理工具了，因爲npm下載模塊速度很慢，因此這裏建議你們先安裝淘寶的npm鏡像cnpm

npm install -g cnpm

安裝成功後咱們就可使用cnpm安裝依賴了，速度很快。

第二步 開始搭建

2.1爲了方便起見，咱們直接選擇vue的官方腳手架工具vue-cli安裝，該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘便可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$  vue init webpack my-project(你要創建的文件名稱，可任意)

vue init webpack my-project的時候會有一些配置供開發者選擇，我簡單解釋一下：

2.2接着輸入以下命令，你的環境就算初步搭建成功了

# 進入目錄
$ cd my-project
# 安裝依賴，npm可替換爲cnpm加快速度
$ npm install
# 運行環境
$ npm run dev

這時咱們能夠看到一個命令行工具打開了一個端口爲8080的本地服務器，在瀏覽器輸入該地址後就能夠打開vue的頁面，到了這一步，咱們就算把vue+webpack的環境搭建完畢了。

第三步 補充scss，pug依賴（擴展）

如今，咱們搭建的環境並不支持scss，pug語法，咱們須要再「加工」一下配置。用到scss，pug的同窗相信webpack已經玩的很溜了，我這裏就不詳細講了，直接上命令行

#安裝支持pug依賴
npm install pug pug-loader pug-filters -D
#安裝支持jade依賴
npm install jade jade-loader -D
#安裝支持scss依賴
npm install sass sass-loader node-sass -D

安裝完成後，進入到/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>

搭建源碼外加小項目