在 Vue CLI 中使用 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) 來做編譯。

測試:將背景色改為黑色

<style lang="scss">
  $color: black;
  body {
    background-color: $color;
  }
</style>

步驟三:使用 Bootstrap 套件

讀取 Bootstrap.scss:@import "~bootstrap/scss/bootstrap";,載入完成後,可以試著載入一個 Bootstrap 的元件,測試是否引入成功。

這段的效果與 @import "../node_modules/bootstrap/scss/bootstrap"; 相同

  • ~:預設是 Node.js 的目錄,即 /node_modules/ 的縮寫
  • ~/:會解析到主目錄
  • ~@:從主目錄下找到 src 資料夾
  • @:指向 /src
  • <style scoped>:代表在這個區域裡的樣式,只限制在這個元件內才能運行

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

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

步驟四:客製化 Bootstrap

1. 新增 all.scss 檔案

在 assets 資料夾新增 all.scss 檔案,方便管理 SCSS。

// 載入 Bootstrap 套用變數的方法,有這些方法才能正確啟用下面自訂的變數
@import '~bootstrap/scss/functions';
// 自定義的變數
@import './helpers/variables';
// 載入 node_modules 裡的 bootstrap/scss/bootstrap.scss 檔案
@import '~bootstrap/scss/bootstrap';

2. 在 App.vue 中引入 Bootstrap

在 App.vue 中從 assets 資料夾引入 Bootstrap。

<style lang="scss">
  /* 後面的 .scss 可以省略 */
  @import './assets/all';
</style>
  • <style lang="scss"> 代表要使用 SCSS 的語法
  • <style scoped> 代表裡面的樣式只適用於該元件內

3. 複製 variables.scss 檔案

新增 helpers 資料夾,並將 node_modules 裡的 variables.scss 複製一份過來,我們可以透過修改裡面的變數,來自定義 Bootstrap 的樣式。

在 Vue CLI 中使用 vue-axios

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

步驟一:安裝 vue-axios 套件

  • 安裝套件:npm install --save axios vue-axios
  • 加到 Entry 檔案 (main.js):

    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

<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) 來取得資料。

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