vue-elemnt-admin原始碼學習
vue-element-admin是一個基於vue，element-ui的整合的管理後臺。它的安裝部分就不說了，按照官網的步驟一步步就可以執行了。
https://panjiachen.github.io/vue-element-admin-site/zh/
單元測試
我們可以看到vue-element-admin的單元測試是使用jtest.config.js來進行測試
vue和jtest的結合就是和官網的一樣：https://cn.vuejs.org/v2/guide/unit-testing.html
jtest的官網：https://github.com/facebook/jest#getting-started
我們可以看到，tests資料夾中
jtest對應的檔案有jtest.config.js，這裡面的配置資訊在這個頁面可以找到：https://jestjs.io/docs/zh-Hans/configuration
可以稍微修改下jest.config.js，將collectCoverage: true, 可以再設定一下coverageReporter
於是可以執行 npm run test:unit
在控制檯可以打出覆蓋率報告，也可以在tests/unit/converage下面打出這些覆蓋率報告。
jsconfig.json
這個是給IDE vscode使用的配置檔案。
plop機制
plop機制是自動生成vue檔案的一種機制。
plop相關的有幾個地方，一個是package.json裡面的npm run new。一個是plop.js中定義了3個生成器：view，store，component。
這三個生成器在資料夾plop-template中都有定義，定義了一個prompt.js和一個index.hbs。hbs是模版檔案，prompt是互動檔案，所以我們可以在命令列中使用npm run new 來初始化一個vue檔案。
plopjs的文件地址：https://plopjs.com/documentation/
postcss.config.js
postcss.config.js說明可以使用postcss外掛來進行配置。
關於為什麼要使用postcss，這兩篇文章寫的很好：
https://segmentfault.com/a/1190000003909268
https://juejin.im/post/59e5dc1d6fb9a0450a666d62
簡單來說，使用postcss會讓css可以按照標準寫法，生成不同字首的寫法檔案
這個是官方說明地址：https://github.com/postcss/postcss/blob/master/README-cn.md
svgo
我們在package.json中可以看到有個script是svgo。
這個命令是將svg圖片檔案進行壓縮的。https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/svgo.html
svg是向量圖，svg放大不失真。svg和canvas都是h5推薦使用的圖形技術，canvas基於畫素，svg為向量，還有完整的動畫，事件機制。
目錄結構
其實vue-elemnt-admin的目錄結構在官網這邊也描述很清楚了：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/#目錄結構
這個目錄結構還是很適合做前端工程學習的。