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/#目錄結構
這個目錄結構還是很適合做前端工程學習的。