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

zegendary發表於2019-02-16
VueWebCSS

標籤：vue,webpack,jade,scss
宣告：轉載須經本人同意
這篇部落格就聊一聊如何用webpack搭建vue2.0的環境，以及擴充了下如何在搭建好的環境中使用scss以及pug（jade），廢話不多說，直接進入主題。

第一步 準備工作

1.1首先要保證自己的環境中安裝了node.js，我們可以通過命令列node -v檢視

clipboard.png

如果出現版本號，說明已經安裝成功了。我這裡的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的時候會有一些配置供開發者選擇，我簡單解釋一下：

clipboard.png

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 檔案,找到如下圖位置：

clipboard.png

將紅框中的內容新增進檔案：

{
  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>

搭建原始碼外加小專案

相關文章