如何修改ElementUI源碼

參考官方文檔

安裝

????首先將ElementUI的官方源碼庫clone下來

https://github.com/ElemeFE/element.git
cd element
npm install

打包

????安裝完依賴后運行打包命令npm run dist
????執行完成后可以發現根目錄下多了lib文件夾,這個文件夾中的文件就是打包后的組件及樣式,和我們使用npm install element-ui下載下來的依賴包中的lib文件夾內容相同,也就是我們使用時引用的資源。

目錄結構

修改

????packages文件夾中存放的就是各種組件源碼,可以根據需要去進行修改,修改完成后重新執行npm run dist就會重新打包,覆蓋lib文件夾

如果僅僅修改了邏輯部分,沒有修改樣式的話到這里就完了,如果還想修改源碼樣式往下看

問題

????修改后將lib文件夾中文件替換你項目中/node_module/element-ui/lib中的文件,即可使用你修改后的組件,如果只是修改了邏輯你會發現一切運行正常,但是如果修改了樣式你會發現樣式沒有生效。

????/packages/theme-chaik下是elementUI各個組件的樣式文件,目錄結構如下
image.png

????源碼中樣式采用sass進行預編譯,所以如果要修改源碼樣式就需要在src文件夾下找到相應的樣式進行修改,修改完成后在theme-chalk文件夾下, npm install安裝以來,安裝完后使用npm run build對樣式進行編譯和打包,(樣式打包使用的是gulp工具),打包后文件會覆蓋theme-chalk下的lib文件夾。

????修改完邏輯和樣式,并對樣式文件進行重打包后,返回根目錄下npm run dist即可打包生成最后的文件。完成后將根目錄下lib文件夾替換自己項目中/node_module/element-ui/lib即可。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容