最近一直在開源社區(qū)瀏覽一些開源的后臺管理框架，從中找到一個自己中意的項目很難，不是后期開發(fā)太繁瑣，要不就是界面不友好，想了想還是自己搭建一個后臺管理模板，以后在開發(fā)過程中直接拿過來開發(fā)就可以了。

此項目是基于一個HEYUI搭建的一款后臺管理模板。

HeyUI 是一套基于 Vue2.0 的開源 UI 組件庫，主要服務于一些中后臺產品。

HeyUI提供的是一整套解決方案，所有的組件提供全局的可配置模式。真正的數據驅動、全局的配置模式、數據字典化

后臺布局通常采用的上左右布局方式

第一部分：登錄頁面

登錄頁面主要是靠設計，設計做的好，前端怎么實現出來都好看，這里的登錄界面也沒有經過專業(yè)的設計，反正還能看的過眼吧(請忽略開發(fā)的審美)。

功能點：選擇記住登錄賬號時，在登錄成功后會將賬號保存到本地存儲，下次進入頁面直接從本地存儲獲取登錄賬號，同時在點擊登錄時會將兩個輸入框屬性設置為只讀，按鈕出現加載效果。

第二部分：管理后臺頭部

相對于整個系統來說，這部分是最簡單的一部分，其中大多數要寫的只是css樣式，唯一一點就是登錄用戶這塊，用到了vuex狀態(tài)管理，如果你在某一處修改了用戶信息，只需要執(zhí)行

this.$store.dispatch('userStore/setUserInfo', {name: '超級管理員'})

就可以修改頁面上顯示的登錄用戶的用戶名。

第三部分：左邊菜單管理

使用Menu組件即可，通過key匹配當前選中的菜單，執(zhí)行

this.$refs.menu.select(this.$route.name)

選中當前菜單。

第四部分：內容區(qū)域

采用子路由加載方式

第五部分：模板主題配置

這里使用的是HEYUI的自定義主題，需要自己定義一個less文件做引用，在less文件中定義主題變量，覆蓋框架默認的主題，本模板就是采用自定義less變量更換主題的。

主題文件位置:srcstylehemes.less

原始全局變量文件你可以在github上查看。

https://github.com/heyui/heyui/blob/master/themes/var.less

如果你還需要一些更細節(jié)化的調整，官方建議可以新建overwrite.less對已有的class進行覆蓋修改。

項目地址：https://gitee.com/yangon/vue-admin-frame

使用

git clone https://gitee.com/yangon/vue-admin-framecd vue-admin-framenpm installnpm run dev

本項目引用到的框架KEYUI：https://www.heyui.top

如果本文對您有所幫助， 請關注科技男給與支持，后期為您帶來更多的技術文章。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue 登录模板_不用自己搭建后台模板，使用这个就够了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。