Vue-cli透過webpack來加載使用pug/scss及BootStrap4

發表於 | 分類於 |

這兩週一直在看BootStrap4跟Vue，真的覺得好好玩啊！
在此紀錄Vue-cli中使用pug/scss/BootStrap4的方法。

Step1. 安裝Vue-cli

透過npm指令來安裝全域Vue-cli

1
$ npm install -g vue-cli

安裝完畢後，建立一個vue-cli的專案吧！

1
$ vue init webpack [project-name]

接著就會出現設定畫面，我設定如下(附上備註)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 專案名稱(不可包含大寫)
? Project name vue-base
// 專案備註
? Project description A Vue.js project
// 作者
? Author GuaHsu <guaswork@gmail.com>
// 
? Vue build standalone
// 是否安裝vue-router
? Install vue-router? Yes
// 是否啟用ESLint
? Use ESLint to lint your code? Yes
// 如果啟用ESLint，可以選規範，我是選Airbnb
? Pick an ESLint preset Airbnb
// 我沒用：D
? Set up unit tests No
// 我沒用：D
? Setup e2e tests with Nightwatch? No
// 我選用npm
? Should we run `npm install` for you after the project has been created? (recommended) npm

Step2. 安裝pug / pug-loader / pug-filters

使用npm指令

1
npm install pug pug-loader pug-filters --save

Step3. 安裝Sass / Sass-loader / node-sass

使用npm指令

1
npm install sass sass-loader node-sass --save

Step4. 安裝BootStrap / jQuery / Popper

由於BootStrap4的不少元件會使用到jQuery與Popper，
會用到BS應該很少單純只使用CSS部份的，這裡是全安裝的設置，
一樣使用npm指令安裝

1
2
3
npm install bootstrap@4.0.0-beta.2 --save
npm install --save jquery
npm install --save popper.js

接著到build/webpack.base.conf.js加入以下設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 最上方加入一個webpack
const webpack = require('webpack')
module.exports = {
  ...
  // 新增plugins
  plugins: [
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'Popper': 'popper.js'
    })
  ],
	...
}

在到src/main.js中把BootStrap載入

1
2
3
// 新增這兩行BootStrap的東西
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

Step 5. 使用！

來用pug + scss + BootStrap來寫vue的元件吧
這裡用預設的範例改，檔案位置src/components/HelloWorld.vue

  1. 要用pug的template必須加上lang="pug"
  2. 要用scss的style必須加上lang="scss"
  3. 此範例template內容為bootstrap的modal元件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template lang="pug">
.hello
  h1 {{ msg }}
  button.btn.btn-success(data-toggle="modal", data-target="#exampleModal") Demo
  #exampleModal.modal.fade
    .modal-dialog(role="document")
      .modal-content
        .modal-header
          h5.modal-title Modal Title
          button.close(data-dismiss="modal")
            span &times;
        .modal-body
          p hello!hello!
        .modal-footer
          button.btn.btn-success save
          button.btn.bth-secondary(data-dismiss="modal") cancle
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Pug / Scss / BootStrap / jQuery',
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$vue-color: #42b983;
h1 {
  color: $vue-color;
}
</style>

另一種選擇 BootStrap-Vue

這是在爬文時看到的，例如同樣以modal作範例只要寫這樣就好：

1
2
3
4
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<b-modal id="modal1" title="Bootstrap-Vue">
  <p class="my-4">Hello from modal!</p>
</b-modal>

他已經包好了，也因為包好好的所以在學習與協作上會有額外的學習成本，
必須了解元件的寫法，也未知若要調整元件的控制是否會有其他困難度..

Vue與jQuery的混用

在Vue.js中使用BootStrap不可避免的會需要用到jQuery，
比較擔心在撰寫方面會有混用的狀況(不確定實務上該是否該分離較佳)。

在群組也有人分享可以用vue來操作，
例如modal的data-dismiss="close"可以改用@click偵聽，
在透過data給個變數放true/false判斷來透過v-show控制開關。

但就必須要更了解BootStrap裡面用到的JS控制邏輯並改為vue控制
像是原本會有這種偵聽關閉事件的函式就得要在改寫掉了：

1
2
3
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})