在 Windows 使用 Vue cli ，Vue2 + TypeScript

 首先安裝 Node.js

 官網

windows 使用 win + R ，輸入 cmd 叫出命令提示字元，接著確認 Node.js 有無安裝成功，輸入

node -v。

有出現 Node.js 的版本號就可以進行下一步安裝 Vue Cli，在命令提示字元輸入 npm install -g @vue/cli。

一樣確認版本，輸入 vue -V。

最後可以選擇用指令或是 UI 來操作，我習慣用 UI ，可以不用一直打 npm run serve，在命令提示字元輸入 vue ui 打開 vue cli 的 UI。

正要用 Hexo 做部落格放自己的文章，所以就取叫 blog ，用 Github 可以順便把下面初始化 Git 倉庫打勾，下一步。

這一頁的設定就比較多：

• Babel 是轉譯 ES6 語法...等等向下相容用。
• TypeScript 是 JavaScript 強型別的改進，正要順便練習所以加入。
• Router 是作 SPA 用的路由，如果重視 SEO， 一種是不用 Router，一種是加入 Nuxt.js。
• Vuex 是不同路由之間轉傳資料的倉庫。
• CSS Pre-processors 是 CSS 預處理器，筆者習慣用 SASS 所以要選，沒選也可以之後再加入。
• Lint 是規範，ESLint 多一些，從善如流選起來。
• Unit Testing 單元測試，寫簡單的小測試可以用，選一下。

選擇詳細的自訂選項，筆者比較常用 SASS 、ESLint、Jest，選好就可以按新增嚕。

首頁：

任務：

任務這邊會有常用的需要指令，開發時的編譯、部屬、測試...等等，當然也可以再導入 CI/CD 

工具，先介紹到這，順便幫自己回憶一下 Vue Cli 的安裝與操作。

Vue Cli 使用 Vue Testing Library 作測試

 打開終端機，輸入 vue ui 先用 Vue Cli 開新專案，選項就一般的 SASS 、 Router 、 ESLint 、

還有這次的主題 Test ，然後會看到 Vue Test Utils 裝好了。然後是神Q超人來六角進行 CI/CD 

講座時的教學，npm Vue Testing Library 可以用簡單的方法 DOM 測試，容後詳述，CI自動化

部屬下篇研究，這篇先介紹寫單元測試：

測試的 JS 檔案有幾種放法：xxx.spec.js、xxx.test.js 或是放在_test_資料夾下，也可以在 

package.json 下作設定

.vue 檔作個簡單的範例：

簡單的按按鈕加一或減一，測試的目標就是按鈕或欄位是否正確。

新增 addtest.spec.js ，測試命名最好簡單直接，可以一眼明白測試什麼用的。

第一步： import 使用到的 Testing Library API ，以及需要測試的 .vue 檔。

第二步：使用 test 寫測試內容，利用 getByTestId 找到 .vue 檔的 data-testId ，選到顯示的數字

第三步： Jest 經典的斷言寫法 expect() ... .toBe ，檢查內容是否相同。

寫完後 npm test 看到勾勾就解決啦。後面還有自動產生錯誤檔的路徑跟內容...等可以延伸，

或是更複雜的測試。

卡關的部分：不會解的地方，如果用 parcel.js 下載下來 postCSS、TailwindCSS，需要 postCSS 

8.0。同樣用 parcel.js 下載，選擇 Vue、SASS、Jest，之後 npm 其他東西，最後寫好作測試的

時候，會有 Cannot find module 'babel-core' 的錯誤，再 google 尋找解法，是 babel7 之後要分開

安裝 babel-core ...等，但始終無法正確執行，找不到是 vue-jest 還是一串哪個路徑錯誤。