To-Do Calendar - Day2 載入外部套件

2022/04/15
2-minute read
SideProject

透過 Vue CLI 的 webpack，來載入 Bootstrap、axios、v-calendar。

載入 Bootstrap

Bootstrap 是 CSS 的一個框架，本次會使用 SASS 的方式來載入。

安裝 Bootstrap、 sass-loader、node-sass

npm install bootstrap@4.6.1 node-sass sass-loader --save

安裝 Bootstrap 部分組件會用到 jQuery 和 proper.js
```
npm install jquery popper.js --save
```
在 main.js 載入 Bootstrap
```
import "bootstrap";
```

npm 安裝套件後，僅代表套件下載在 node_modules 裡，還要透過 import 的方式才能開始使用。

測試 SASS、Bootstrap 是否運作
1. 在 App.vue 的 <style> 指定 lang 為 scss
2. 刪掉原有的 css，改為以下代碼進行測試
```
<style lang="scss">
  $color: black;
  body {
    background-color: $color;
  }
</style>
```
1. 重新運行，背景變黑色表示 SASS 安裝成功：
2. 使用 @import 的方式，將 bootstrap.scss 載入進來
```
<style lang="scss">
  @import "~bootstrap/scss/bootstrap";
</style>
```
Warning
此專案用的是 Bootstrap 4，所以使用 Bootstrap 官網文件時，需注意是否已切換到 v4.6.x。

6. 加入 Bootstrap 元件測試是否運作，元件出現表示載入成功

客製化樣式

在 src/assets 目錄下新增 all.scss 檔案、helpers 目錄
將 App.vue 的 <style> import 的路徑指向改為 all.scss

<style lang="scss">
  @import "./assets/all";
</style>

複製 nose_modules/bootstrap/scss/_variables.scss，並在 src/assets/helpers 下貼上
在 all.scss 加入以下內容

 @import "~bootstrap/scss/functions"; //載入 Bootstrap 套用變數的方法
 @import "./helpers/_variables"; //載入我們自定義變數
 @import "~bootstrap/scss/bootstrap";

修改 _variables.scss $theme-colors 測試是否載入自定義樣式

// scss-docs-start theme-colors-map
$theme-colors: (
 "primary": $pink, //$primary
 "secondary": $secondary,
 "success": $success,
 "info": $info,
 "warning": $warning,
 "danger": $danger,
 "light": $light,
 "dark": $dark
) !default;

元件樣式顏色有改變表示載入成功

載入 axios

axios 是 AJAX 的一個工具，他是基於 Promise 開發的 HTTP 請求工具，用來取得遠端資料。

安裝 axios、vue-axios
```
npm install --save axios vue-axios
```

axios：主要 AJAX 套件。
vue-axios：將 axios 轉為 Vue 套件。

在 main.js 載入 axios、vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

使用 Random user API 測試 axios 是否運作
1. 在 App.vue 加入 created hook 與以下代碼
```
 created() {
  this.$http.get("https://randomuser.me/api/").then((response) => {
    console.log(response.data);
  });
},
```
1. console 出現回傳資料表示載入成功

載入 v-calendar

v-calendar 是一個輕量級的 Vue.js 日曆和日期選擇器套件。

安裝 v-calendar
```
npm install v-calendar --save
```

在 main.js 載入 v-calendar

import VCalendar from 'v-calendar'
Vue.use(VCalendar);

加入 v-calendar 元件測試是否運作，元件出現表示載入成功

延伸閱讀

參考資料

六角學院 Vue.js 課程

comments

comments powered by Disqus