---
# System prepended metadata

title: 課後總複習Part 1
tags: [Vue 實戰班]

---

---
tags: Vue 實戰班
---

# 課後總複習Part 1
## ESLint常見錯誤
### CRLF、LF錯誤
VS CODE碰到的話請在下方LF/CRLF區塊選為LF
這是Linux/Windows的斷行符號不同造成
預設使用LF請在這邊改(settings搜尋EOL)
![](https://i.imgur.com/kacxcG3.png)

### Tab/Space 縮排設定
請使用Space，多數設定用2個空格
![](https://i.imgur.com/3iltmCJ.png)

### 未重新賦值的let宣告
請修改為const宣告

### 未使用物件解構寫法
```javascript=
const name = a.name
```
改為
```javascript=
const { name } = a
```

### 物件內最後一項屬性未使用逗號結尾
```javascript=
{
    a,
    b
}
```
改為
```javascript=
{
    a,
    b,
}
```
原因: 這樣要新增一個 c 屬性為
```javascript=
{
    a,
    b, // 這行不會因為要另外加逗號而被標示為變更行
    c,
}
```
時，就不需要因為 b 那行最後的逗號多了一個 commit 標示

## jQuery註冊
### 區域註冊
元件內
```javascript=
import $ from 'jquery'
```
### 全域註冊
main.js內
```javascript=
import $ from 'jquery'

window.$ = $;
```

如果使用 ESLint
需在元件內額外加入
```javascript=
/* global $*/
```


## EventBus
導入方式
```javascript=
Vue.prototype.$bus = new Vue();
```
哪個情境要使用?
> 一般的上(外)下(內)元件溝通使用 props 即可
> 如果要跨頁使用的話，才需要使用 eventbus

## Bootstrap導入方式
1. CDN
> ```html=
> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
> ```
2. 載入全部CSS
> ```vue=
> <style lang="scss">
> @import 'bootstrap';
> </style>
> 
3. 客製化Bootstrap
> 1. 抓出 _variables.scss 到
> 2. 建立主要的 main.scss 檔案
> 3. main.scss
> ```scss=
> @import '~bootstrap/scss/functions'; // 官方的
> @import '@/assets/scss/_variables'; // 自己的
> @import '~bootstrap/scss/mixins'; // 官方的
> @import '~bootstrap';
> ```
> 4. 在 App.vue 導入 main.scss
> ```vue=
> <style lang="scss">
> @import '@/assets/scss/main';
> </style>
> ```

## 檔案整理
1. 大圖 => public, 圖庫
2. 小圖、icon => 編譯成 base64 string

1. assets/scss => 放主要的 CSS (OOCSS派常見作法)
2. 元件 style => 模組化的特定樣式 CSS (BEM派常見作法)
3. inline => 只使用一次的樣式 e.g. 背景圖
    **圖片的寬高，不超過顯示區域的兩倍，避免下載/render太慢**

## font awesome
1. CSS 版本 => 推薦使用 => icon - 字體 (IE8以上都可使用)
2. JS 版本 => 可考慮 => icon - SVG (Vue 動態切換 v-if 可能會出錯)
**建議SVG三個字不要唸出來，麥克風會壞掉**

