vue-elemnt-admin源碼學習

單元測試

我們可以看到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會讓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爲矢量，還有完整的動畫，事件機制。

目錄結構

這個目錄結構還是很適合做前端工程學習的。