今天分享手把手擼後臺系列三：electron+vite。js封裝自定義元件功能。
vite+electron自定義頂部導航欄
專案中的頂部導航條採用無邊框模式，風格類似
mac
，左側為關閉/最小/大化，中間顯示標題，右側為自定義圖示Icon。
新建一個winbar。vue模板檔案。
/* css3實現漸變背景 */。nt__winbar-wrap { background-image： -webkit-linear-gradient（top， rgb（245， 245， 245） 0px， rgb（237， 237， 237） 1px， rgb（231， 231， 231） 2px， rgb（209， 209， 209） 100%）； border-bottom： 1px solid rgb（190， 190， 190）； background-size： cover； background-repeat： no-repeat； color： #20232a； height： 28px； width： 100%； position： relative； z-index： 2021；}
自定義側邊欄sidebar.vue
支援
自動匹配
並
高亮
當前路由地址。
<！—— //側邊欄 ——> 
自定義圖示Icon
<！—— //自定義圖示 ——>
支援element-plus內建圖示，也支援iconfont字型庫圖示。
Vue-I18n國際化
專案中路由選單可實時切換多語言，目前支援中文、英文及繁體。
<！—— //國際化模板 ——>
vite.js自定義連結
判斷是否是外部連結，是就用a標籤開啟連結，反之使用router-link。
electron+vite2+vue3 搭建後臺 系列一（登入｜註冊篇）
electron+vite2+vue3 搭建後臺 系列二（路由｜佈局篇）
vite。js+electron後臺開發之封裝一些簡單元件就先分享到這裡。希望對大家有所幫助~~
