--- 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三個字不要唸出來，麥克風會壞掉**