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 <[email protected]>
//
? 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 [email protected] --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來操作,
例如modaldata-dismiss="close"可以改用@click偵聽,
在透過data給個變數放true/false判斷來透過v-show控制開關。

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

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