前端er必須知道的Git地址及常用工具地址

Glrssn發表於2021-04-08

商城篇(找工作必練)

開源商城

推薦指數:5星,掌握了它,可以說,今後工作中的各種需求都不是問題,工作1~2年的也可以學習其中的思路(建議收藏)。

這是一個集小程式/公眾號/app為一體的商城系統,包括前臺後臺等多端程式碼,頁面UI完善,所涉及到的知識也非常豐富,非常值得新手前端進行研究嘗試,掌握了這個商城的解構。

wemall雲平臺

推薦指數:3星

WeMall微商城系統是基於ThinkPHP技術架構,實現MVC、快取等框架設計的微商城原始碼,幫助中小企業及個人迅速搭建商城系統,減少二次開發帶來的成本。

Mall4j

推薦指數:2星

一個基於spring boot、spring oauth2.0、mybatis、redis的輕量級、前後端分離、防範xss攻擊、擁有分散式鎖、為生產環境多例項完全準備、資料庫為b2b2c設計、擁有完整sku和下單流程的完全開源商城。

超級常用URL篇

圖片壓縮

2021了,不會還有小夥伴不知道這個熊貓壓縮地址吧。他可以將你的本地圖片壓縮70%甚至更多,大大變小包的大小,快快儲存起來吧。

ES6快速入門

前端er都知道掌握ES6就等於掌握了程式碼時光機,它可以極大的加快你的開發效率,節省你的程式碼行數,大大提前你的下班時間。所以何樂而不為呢?

快速獲得漸變色

還在為一個css的漸變色而苦惱嗎? 試試這個網址吧 它可以快速的幫你生成CSS程式碼,讓你不再頭大。

向量圖示庫

要說圖示庫,這個說第二,就沒人敢說第一。用過的小夥伴都說好。

echarts視覺化圖表庫

echarts 最好用的開源視覺化圖表庫,可以幫你從容的滿足老闆的各種視覺化需求,當然,熟練運用和掌握還是需要同學們多多實踐的。

UI類

ivew

Element

作者:Hznnnnn
連結:https://www.zhihu.com/question/53842719/answer/185855867
來源:知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

1,使用率(npm 平均下載頻率,元件數量,star, issue…)element-ui前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
結論 ,element 生態更好,使用頻率遠超過iview ,element開發團隊實力感謝評論區 糾錯1.Element 有級聯選擇。2.Element 的 Popover 即 iView 的 Poptip 元件。3.Tooltip iView 和 Element 都有。一些小眾元件上各有所長 整體iview 更豐富(時間軸,載入進度條,氣泡卡片 ,BackTop,圖釘)API風格通過使用平率最高的 form table 日曆 select 等比較兩者前端er必須知道的Git地址及常用工具地址
對應程式碼前端er必須知道的Git地址及常用工具地址
明顯感覺 iview 的api 更加簡潔,在生成類似表格 下拉框這些較複雜的元件時 , iview 的方式類似於antdesign , 好處是直接傳資料進去,在內部實現了模板生成,高效 快捷。 而element 則是用到到v-for vue指令結合的方式去生成,批量生成元素。前端er必須知道的Git地址及常用工具地址表格 操作列 自定義渲染的時 ,iview 使用的是 vue的 render 函式, element 直接在template 中插入對應模板 表格分頁都需要 引入分頁元件 配合使用前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
前端er必須知道的Git地址及常用工具地址
兩者api 總體比較 ,iview 要比element 簡潔許多。 餓了麼更側重於在template裡直接去渲染模板思想上 個人覺得iview偏向react, element 更vue表單校驗 兩者都使用同一款外掛 async-validator 校驗方式一樣專案優化角度首屏優化,第三方元件庫依賴過大 會給首屏載入帶來很大的壓力,一般解決方式是 按需求引入元件element-ui 根據官方說明 現需要引入 babel-plugin-component 外掛 做相關配置 然後直接在元件目錄 註冊全域性元件前端er必須知道的Git地址及常用工具地址
iview 按需求載入 這裡感覺官方給的文件不是很詳細 前端er必須知道的Git地址及常用工具地址
主題iview本身提供了一套主題可供選擇,除此之外 自定義主題方法一(官方推薦,前提條件是使用webpack):新建一個.less 檔案 , 先在less檔案中引入官方樣式檔案 然後在此基礎上覆寫前端er必須知道的Git地址及常用工具地址
方法二 : 官方提供了 自動編譯工具iview-them 來編譯。乾的事情就是 把自定義的樣式和 github倉庫最新的樣式 通過工具生成一個新的樣式檔案。element-ui如果只替換顏色 ,可以使用 線上主題生成工具 線上編輯顏色, 生成element-ui 主題 直接下載 再引入深度定製主題官方提供了 主題生成工具 element-them 執行命令 初始化得到一個配置檔案 ,修改相關配置 經過編譯得到 得到相關主題檔案 再通過babel 外掛引入前端er必須知道的Git地址及常用工具地址
雙方都提供了專門的工具用於深度定製主題,綜合比較 iview 更加簡單,element 主題定製需要配合 babel做一些預編譯 ,以及步驟更多 顯得更加複雜過渡動畫element 有內建過渡動畫 使得元件的切換變化 更具動感iview 更為中規中矩

原文及git連結

UI篇分析原文連結

相關文章