商城篇（找工作必練）

開源商城

推薦指數(shù)：5星，掌握了它，可以說,今后工作中的各種需求都不是問題，工作1~2年的也可以學(xué)習(xí)其中的思路（建議收藏）。

這是一個(gè)集小程序/公眾號/app為一體的商城系統(tǒng)，包括前臺(tái)后臺(tái)等多端代碼端蛆，頁面UI完善，所涉及到的知識(shí)也非常豐富绘面，非常值得新手前端進(jìn)行研究嘗試欺税，掌握了這個(gè)商城的解構(gòu)。

wemall云平臺(tái)

推薦指數(shù):3星

WeMall微商城系統(tǒng)是基于ThinkPHP技術(shù)架構(gòu)揭璃，實(shí)現(xiàn)MVC晚凿、緩存等框架設(shè)計(jì)的微商城源碼，幫助中小企業(yè)及個(gè)人迅速搭建商城系統(tǒng)瘦馍，減少二次開發(fā)帶來的成本歼秽。

Mall4j

推薦指數(shù):2星

一個(gè)基于spring boot、spring oauth2.0情组、mybatis燥筷、redis的輕量級、前后端分離院崇、防范xss攻擊肆氓、擁有分布式鎖、為生產(chǎn)環(huán)境多實(shí)例完全準(zhǔn)備底瓣、數(shù)據(jù)庫為b2b2c設(shè)計(jì)、擁有完整sku和下單流程的完全開源商城。

超級常用URL篇

圖片壓縮

2021了拨扶，不會(huì)還有小伙伴不知道這個(gè)熊貓壓縮地址吧凳鬓。他可以將你的本地圖片壓縮70%甚至更多，大大變小包的大小患民，快快保存起來吧缩举。

ES6快速入門

前端er都知道掌握ES6就等于掌握了代碼時(shí)光機(jī)，它可以極大的加快你的開發(fā)效率匹颤，節(jié)省你的代碼行數(shù)仅孩，大大提前你的下班時(shí)間。所以何樂而不為呢印蓖？

快速獲得漸變色

還在為一個(gè)css的漸變色而苦惱嗎杠氢？ 試試這個(gè)網(wǎng)址吧 它可以快速的幫你生成CSS代碼，讓你不再頭大另伍。

矢量圖標(biāo)庫

要說圖標(biāo)庫，這個(gè)說第二绞旅，就沒人敢說第一摆尝。用過的小伙伴都說好。

echarts可視化圖表庫

echarts 最好用的開源可視化圖表庫因悲，可以幫你從容的滿足老板的各種可視化需求堕汞，當(dāng)然，熟練運(yùn)用和掌握還是需要同學(xué)們多多實(shí)踐的晃琳。

UI類

ivew

Element

1讯检，使用率（npm 平均下載頻率，組件數(shù)量卫旱，star, issue…)
element-ui

圖片

圖片

圖片

圖片

圖片

圖片

圖片

結(jié)論 人灼，element 生態(tài)更好，使用頻率遠(yuǎn)超過iview ,element開發(fā)團(tuán)隊(duì)實(shí)力更強(qiáng)
一些小眾組件上各有所長 整體iview 更豐富（時(shí)間軸顾翼，加載進(jìn)度條投放，氣泡卡片 ，BackTop,圖釘）
API風(fēng)格
通過使用平率最高的 form table 日歷 select 等比較兩者

圖片

對應(yīng)代碼

圖片

明顯感覺 iview 的api 更加簡潔适贸，在生成類似表格 下拉框這些較復(fù)雜的組件時(shí) 灸芳， iview 的方式類似于antdesign , 好處是直接傳數(shù)據(jù)進(jìn)去，在內(nèi)部實(shí)現(xiàn)了模板生成拜姿，高效 快捷烙样。 而element 則是用到到v-for vue指令結(jié)合的方式去生成，批量生成元素蕊肥。

圖片

表格 操作列 自定義渲染的時(shí) 谒获，iview 使用的是 vue的 render 函數(shù)， element 直接在template 中插入對應(yīng)模板
表格分頁都需要 引入分頁組件 配合使用

圖片

圖片

圖片

兩者api 總體比較 ，iview 要比element 簡潔許多究反。 餓了么更側(cè)重于在template里直接去渲染模板
思想上 個(gè)人覺得iview偏向react, element 更vue

表單校驗(yàn) 兩者都使用同一款插件 async-validator 校驗(yàn)方式一樣

項(xiàng)目優(yōu)化角度
首屏優(yōu)化寻定，第三方組件庫依賴過大 會(huì)給首屏加載帶來很大的壓力，一般解決方式是 按需求引入組件
element-ui 根據(jù)官方說明 現(xiàn)需要引入 babel-plugin-component 插件 做相關(guān)配置 然后直接在組件目錄 注冊全局組件

圖片

iview 按需求加載 這里感覺官方給的文檔不是很詳細(xì)

圖片

主題
iview

本身提供了一套主題可供選擇精耐，除此之外 自定義主題

方法一（官方推薦狼速，前提條件是使用webpack）:
新建一個(gè).less 文件 ， 先在less文件中引入官方樣式文件 然后在此基礎(chǔ)上復(fù)寫

圖片

方法二 ：
官方提供了 自動(dòng)編譯工具iview-them 來編譯卦停。干的事情就是 把自定義的樣式和 github倉庫最新的樣式 通過工具生成一個(gè)新的樣式文件向胡。

element-ui
如果只替換顏色 ，可以使用 在線主題生成工具 在線編輯顏色惊完， 生成element-ui 主題 直接下載 再引入

深度定制主題
官方提供了 主題生成工具 element-them
執(zhí)行命令 初始化得到一個(gè)配置文件 僵芹，修改相關(guān)配置 經(jīng)過編譯得到 得到相關(guān)主題文件 再通過babel 插件引入

圖片

雙方都提供了專門的工具用于深度定制主題，綜合比較 iview 更加簡單小槐，element 主題定制需要配合 babel做一些預(yù)編譯 拇派，以及步驟更多 顯得更加復(fù)雜

過渡動(dòng)畫
element 有內(nèi)置過渡動(dòng)畫 使得組件的切換變化 更具動(dòng)感
iview 更為中規(guī)中矩

原文及git鏈接

UI篇分析原文