Vue 初心者筆記 #29 Vue CLI 載入外部套件

本篇筆記介紹如何在 Vue CLI 載入外部的套件,像是透過 SASS 的方式來載入 Bootstrap,以及使用 vue-axios 這個 AJAX 工具取得遠端的資料。

Bootstrap

步驟一:安裝 Bootstrap 套件

安裝套件:npm install bootstrap node-sass sass-loader --save

Bootstrap 官方文件 中,有提到如何透過 NPM 的方式來安裝 Bootstrap。
但是在 Vue CLI 中並沒有提供完整的 sass-loader,所以這裡要再加入安裝 node-sass 與 sass-loader 這兩個套件。

另外,在寫這篇筆記時,我其實是使用舊版的 sass-loader,因為新版在更新後跑出錯誤,又找不到解法,所以就乾脆改回舊版。
裝回舊版本 sass-loader:npm install --save-d sass-loader@7.1.0

步驟二:使用 SASS 編譯程式碼

程式碼中的 <style lang="scss"> 的意思就是指 Webpack 的 Loader 會取出這段程式碼,使用 SASS (SCSS) 來做編譯。

測試:將背景色改為黑色

1
2
3
4
5
6
<style lang="scss">
$color: black;
body {
background-color: $color;
}
</style>

步驟三:使用 Bootstrap 套件

讀取 Bootstrap.scss:@import "~bootstrap/scss/bootstrap";

  • ~:預設是 Node.js 的目錄,即 /node_modules/ 的縮寫

  • ~/:會解析到主目錄

  • ~@:從主目錄下找到 src 資料夾

  • @:指向 /src

    因此,上面那段的效果與 @import "../node_modules/bootstrap/scss/bootstrap"; 相同。

    載入完成後,可以試著載入一個 Bootstrap 的元件,測試是否引入成功。

  • <style scoped>:代表在這個區域裡的樣式,只限制在這個元件內才能運行

    假設我在 HelloWorld.vue 的 <style scoped> 內寫了一個樣式,而這個樣式的 HTML 標籤在兩個 .vue 元件內都存在。
    那麼在 App.vue 模板內的標籤其實是吃不到這個樣式的,因為這個樣式被限制在 HelloWorld.vue 這個元件內才能運行。

    這個就是 Vue 的 <style> 所擁有的一個特色!

vue-axios

vue-axios 套件很像 jQuery,是使用非同步的 Promise 來製作。

步驟一:安裝 vue-axios 套件

  • 安裝套件:npm install --save axios vue-axios

  • 加到 Entry 檔案 (main.js):

    1
    2
    3
    4
    5
    6
    7
    8
    import Vue from 'vue';
    import App from './App';

    // And vue-axios in your entry file
    import axios from 'axios';
    import VueAxios from 'vue-axios';

    Vue.use(VueAxios, axios);
    • import axios from 'axios':主要的 AJAX 套件
    • import VueAxios from 'vue-axios':將它轉為 Vue 的套件
    • Vue.use(VueAxios, axios):用 use 的方式來執行它

步驟二:使用 vue-axios 套件取得遠端資料

完成上述步驟後,我們可以透過 Random User API 來做一點測試,
這邊就試著透過官方提供的 API 路徑,來取得隨機的假個人資料。

Random User 官方網站鏈結:Random User Generator | Home

透過 this.$http 的方式來 GET 遠端資料

我們使用 ES6 箭頭函式的寫法來取得遠端資料,也就是 response 的內容。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
import HelloWorld from '@/components/HelloWorld'

export default {
name: 'App',
components: {
HelloWorld
},
// Random User API
created() {
this.$http.get('https://randomuser.me/api/').then((response) => {
console.log(response)
})
},
}
</script>

取得的資料有:

  • data:Random User 上面的資料,這個就是我們要的資料
  • 其他像是 status 這些資訊,都是 axios 自動從 Server 端帶來的資訊

Random User API response

最後,因為我們要的是 data,所以我們通常會直接用 console.log(response.data) 來取得資料。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。