菜蟲學習筆記：Vue 套件整理

發表於 | 更新於 | In | 0 comments |
文章字數 : 573 | 所需閱讀時間 ≈ 2 分鐘

把目前vue會用到的套件整理成清單，之後要找的時候也比較方便

Node.js

Node.js

安裝步驟：菜蟲學習筆記：Vue Cli 環境建置 - 安裝Node.js

Vue Cli

Vue Cli 2.x
Vue Cli 3.0

安裝步驟：菜蟲學習筆記：Vue Cli 環境建置 - 安裝 Vue Cli 套件

vue-axios

vue-axios npm (ajax套件)
Random User (user API串接網站)

1.安裝

1
npm install --save axios vue-axios

2.引入檔案main.js

1
2
3
4
5
import Vue from 'vue'
import axios from 'axios' // 主要ajax的套件
import VueAxios from 'vue-axios' // 將ajax轉為vue的套件
 
Vue.use(VueAxios, axios)  // 需使用此行程式碼才能執行

Usage:
You can use axios like this:

1
2
3
4
5
6
7
8
9
10
11
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.$http.get(api).then((response) => {
  console.log(response.data)
})

Vue Router

Vue Router

安裝步驟：菜蟲學習筆記：Vue Router 配置

Bootstrap

Bootstrap套件安裝：

1
npm install bootstrap --save

因sass在vue cli沒有安裝完整的loader，此處可再加入node-sass sass-loader兩個套件，

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

※ 安裝完成後可至node_midules中找到Bootstrap資料夾，此處dist資料夾內為編譯過的css和js檔案；scss資料夾內為未編譯的檔案。(這邊會使用的是scss未編譯的檔案)

jQuery

若要使用bootstrap的javascript，就必須額外再安裝jquery和popper.js套件。
在VS Code終端機輸入安裝

1
npm install --save jquery popper.js

此時至main.js使用import 'bootstrap';即可載入含有javascript的bootstrap套件。

vue-loading-overlay

Loading效果套件，可以全螢幕或在指定的Element中顯示
vue-loading-overlay

1.安裝npm install vue-loading-overlay 套件，並至main.js載入

1
2
3
4
5
import Loading from 'vue-loading-overlay';  
import 'vue-loading-overlay/dist/vue-loading.css';

// 使用全域載入套件方式
Vue.component('Loading' , Loading);

2.將loading元件放置html中

1
<loading :active.sync="isLoading" :can-cancel="true" :on-cancel="onCancel" :is-full-page="fullPage"></loading>

Event.Bus

Event.Bus

使用Event.Bus套件可以跨元件通訊
新增bus.js，且直接掛載在Vue的原型下，並注入到main.js裡面
※ 此處另開js檔是為使用全域註冊，若之後在其他頁面要使用AlertMessage，直接載入此元件即可。

1
2
3
4
5
import Vue from 'vue';
Vue.prototype.$bus = new Vue();  // 直接掛載在Vue的原型下

// 至main.js載入event.bus的檔案
import './bus';

參考：https://ithelp.ithome.com.tw/articles/10188117