# Vue cli 3 設定環境
### #1 Bable
##### JavaScript 轉碼器

因為目前瀏覽器對於新型態JavaScript語法支援度不高，babel-loader可將ES6或ES7語法轉為可以在任何瀏覽器中支援度高的ES5的語法 （甚至是舊的瀏覽器）。

參考：[Vue, Webpack 4 & Babel 基础入门](https://learnku.com/vuejs/t/23333/getting-started-with-vue-webpack-4-babel)

---

### #2 TypeScript
##### TypeScript 用來補足 JavaScript 在型別上的不足，他有可選的靜態型別，以及支援最新的 ES6 特性
Vue新版本3.0 使用 TypeScript 開發，讓本來就很火的 TypeScript 受到更多人的關注。雖然 TypeScript 在近幾年才火，但其實它誕生於2012年10月，正式版本釋出於2013年6月，是由微軟編寫的自由和開源的程式語言。TypeScript 是 JavaScript 的一個超集，擴充套件了 JavaScript 的語法，添加了可選的靜態型別和基於類的面向物件程式設計。

JavaScript開發中經常遇到的錯誤就是變數或屬性不存在，然而這些都是低階錯誤，而靜態型別檢查恰好可以彌補這個缺點。什麼是靜態型別？舉個栗子：

//javascript 
let str = 'hello'
str = 100 //ok

//typescript
let str:string = 'hello'
str = 100 //error: Type '100' is not assignable to type 'string'.

可以看到 TypeScript 在宣告變數時需要為變數新增型別，如果變數值和型別不一致則會丟擲警告。靜態型別只在編譯時進行檢查，而且最終編譯出來的程式碼依然是 JavaScript。即使我們為 string 型別的變數賦值為其他型別，程式碼也是可以正常執行的。

其次，TypeScript 增加了程式碼的可讀性和可維護性，型別定義實際上就是一個很好的文件，比如在使用函式時，只需要看看引數和返回值的型別定義，就大概知道這個函式如何工作。

參考：[初次在Vue專案使用TypeScript，需要做什麼](https://www.itread01.com/content/1576343165.html)

---

### #3 Progressive Web App (PWA) Support
##### 是否支援漸進式網頁應用 (PWA)
PWA（Progressive Web Apps）雖然是網頁應用，但是可以帶來媲美原生的用戶體驗，其中包含離線可用，後台推送等功能。 PWA 不是一個新名詞，早在2015 年已經開始提出這個思想並明明，但是直到iOS12 發布，PWA 終於可以在iOS 中添加到主屏，只有安卓和iOS 都能使用PWA 的基本功能，它才算是真的開始走近大眾。

參考：[Vue CLI 3 搭建 PWA](https://zhuanlan.zhihu.com/p/44705641) | [記錄一次基於vue、typescript、pwa的項目由開發到部署](https://medium.com/@zhenghaoli1996/%E8%A8%98%E9%8C%84%E4%B8%80%E6%AC%A1%E5%9F%BA%E6%96%BCvue-typescript-pwa%E7%9A%84%E9%A0%85%E7%9B%AE%E7%94%B1%E9%96%8B%E7%99%BC%E5%88%B0%E9%83%A8%E7%BD%B2-6d5189ddc22d)
相關文章 :[Progressive Web Application (PWA) – 漸進式網頁應用程式](https://www.astralweb.com.tw/progressive-web-application/) | [[Day01] 什麼是漸進式網頁應用(Progressive Web Application)](https://ithelp.ithome.com.tw/articles/10215567)

---

### #4 Router
##### vue-router（vue路由）
在 vue router 中可以使用 `history` 或 `hash` 兩種模式
* default 是 hash 模式
* hash mode
- url 帶有 # 符號
- 只有在 # 前的 url 包含在 http 請求中，如：
<img src="https://d1dwq032kyr03c.cloudfront.net/upload/images/20190918/20112158x2P2nv6rmO.png">
:::info
hash 不被包括在 HTTP 請求中（對後端完全沒有影響），因此改變 hash 不會重新加載頁面
:::
* history mode：
- url 完整包含在 http 請求中，如：
<img src="https://d1dwq032kyr03c.cloudfront.net/upload/images/20190918/20112158PbmE3HsDEY.png">
:::info
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定瀏覽器支持）
:::
參考：[Vue CLI3 安裝與建立 vue 專案](https://ithelp.ithome.com.tw/articles/10216606)

---

### #5 Vuex
##### vuex（vue的狀態管理模式）
官方話：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

簡單的說：Vuex是vue框架中狀態管理。

參考：[Vuex是什麼？Vuex能做什麼？Vuex怎麼使用？](https://kknews.cc/code/yvpza3b.html)

---

### #6 CSS Pre-processors
##### CSS 預處理器（如：less、sass）
CSS 預處理器可以說是 CSS 語法的擴充，為了彌補 CSS 在大型專案維護性的不足，CSS 預處理器中新增了變數、混入、繼承、嵌套等寫法，讓開發者可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。

現今較為主流的 CSS 預處理器有三種，分別是 Sass/SCSS、Less、Stylus，其中的 Sass/SCSS 是目前最多人使用也相對較成熟的選擇。

而這些 CSS 預處理器相對於 CSS 算是較高階的語法，需要另外編譯成 CSS，瀏覽器才看得懂。
<img src="https://uploads-ssl.webflow.com/5d3a7aed4e11720246d46f49/5dcbce30c5d5620275258bf9_wszpMgU.jpeg">

參考：[Sass/SCSS 基本語法介紹，搞懂CSS 預處理器](https://tw.alphacamp.co/blog/css-preprocessor-sass-scss)

---

### #7 Linter / Formatter
##### 檢查 Coding Style 與格式化，例如 ESlint
團隊開發中，多人開發同一個項目，由於個人編碼習慣不同，一個項目中最終的代碼風格可能差別很大，所以需要通過工具進行約束來保證代碼風格的統一。同時也希望通過工具儘可能的減少低級錯誤出現，並且能幫助修正，所以有了各種各樣的 lint 和 formatter。

---

### #8 Unit Testing
##### 單元測試（unit tests）依公司需求
我有爬過幾篇文章，但對vue test utils有興趣可以參考下面文章 :
[[vue]使用jest和官方的vue test utils來寫單元測試(vue單元測試系列-5)](https://dotblogs.com.tw/kinanson/2017/10/17/222548)
[從範例學習 Vue.js 的 Unit Test](https://medium.com/@envive.tw/%E5%BE%9E%E7%AF%84%E4%BE%8B%E5%AD%B8%E7%BF%92-vue-js-%E7%9A%84-unit-test-44e6f9f1b903)
:::success
npm run unit // 啟動單元測試
:::

---

### #9 E2E Testing
##### e2e（end to end） 測試 依公司需求
所謂的E2E就是end-to-end。
假設我們編寫的每個功能程式都是一個黑匣子，終端使用者也只會看到這個黑匣子，那麼站在使用者的角度來看並不需要知道這個黑匣子內部是什麼東西也不需要知道怎麼實現的，我只管知道最終效果是不是我們想要的。
那麼對映到前端這邊的話就是：我不管你邏輯使用什麼框架什麼邏輯寫的，我只想知道瀏覽器上我要的互動效果，ui展示效果是不是正確的，功能使用上是不是正確的，那麼這就叫E2E測試。
:::success
npm run e2e // 啟動端到端測試
:::

---

其他文章 : [[Vue]Vue 起手式](https://dotblogs.com.tw/rexhuang/2019/12/07/000222) | [記帳程式 (04)：用 Vue CLI 3 建置專案](https://ithelp.ithome.com.tw/articles/10218277)

###### tags: `Vue`