清新優雅&高顏值!一個基於Vue3實現的後臺管理模板

来源:https://www.cnblogs.com/codechen8848/p/18245467
-Advertisement-
Play Games

SoybeanAdmin —— 一個清新優雅、高顏值且功能強大的後臺管理模板。基於最新的前端技術棧,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。 ...


大家好,我是 Java陳序員

今天,給大家介紹一個高顏值的開源後臺管理模板,已經收穫了 8k+ Star!

關註微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。

項目介紹

SoybeanAdmin —— 一個清新優雅、高顏值且功能強大的後臺管理模板。基於最新的前端技術棧,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。

SoybeanAdmin 內置了豐富的主題配置和組件,代碼規範嚴謹,實現了自動化的文件路由系統。

SoybeanAdmin 提供了一站式的後臺管理解決方案,無需額外配置,開箱即用。同樣是一個快速學習前沿技術的最佳實踐。

功能特色:

項目截圖

項目部署

環境準備:

  • Git
  • NodeJS 18+
  • pnpm 8+

克隆項目

git clone https://github.com/soybeanjs/soybean-admin.git

安裝依賴

cd soybean-admin
pnpm i

啟動項目

## 啟動測試環境
pnpm run dev

## 啟動生產環境
pnpm run dev:prod

項目構建

## 構建測試環境
pnpm run build:test

## 構建生產環境
pnpm build

最後,貼上項目地址:

項目地址:https://github.com/soybeanjs/soybean-admin
線上體驗:https://soybeanjs.cn/login?redirect=/home

最後

推薦的開源項目已經收錄到 GitHub 項目,歡迎 Star

https://github.com/chenyl8848/great-open-source-project

或者訪問網站,進行線上瀏覽:

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支持,如文章對你有幫助還請點贊轉發支持下,謝謝!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS中有一些操作可以動態地執行JS代碼,並修改或新建詞法作用域,這種操作雖然帶來了更多的靈活性,但是會嚴重地影響到性能。 ...
  • 1. 不使用臨時變數來交換變數的值 2. 對象解構,讓數據訪問更便捷 3. 淺克隆對象 4. 合併對象 5. 清理數組 6. 將 NodeList 轉換為數組 7. 檢查數組是否滿足指定條件 8. 將文本複製到剪貼板 9. 刪除數組重覆項 10. 取兩個數組的交集 11. 求數組元素的總和 12. ... ...
  • 這篇文章介紹了Web Components技術,它允許開發者創建可復用、封裝良好的自定義HTML元素,並直接在瀏覽器中運行,無需依賴外部庫。通過組合HTML模板、Shadow DOM、自定義元素和HTML imports,Web Components增強了原生DOM的功能,提高了組件化開發的封裝性和... ...
  • 隨便寫的小網頁練習: 原視頻:十分鐘學會寫網頁【編程前端入門】 簡介: 本期重做了好幾遍,是全新的視角和概念,從瀏覽器底層渲染原理到實現網站的演示,一節課講透,必看的一期。後面不管是寫小程式還是App,都會用到這一期的概念。 這一期內容是我做完第一章個人網站後更新的,用來替代原先沒做好的第三節, ...
  • 這篇文章介紹了微前端架構概念,聚焦於如何在Vue.js項目中應用Qiankun框架實現模塊化和組件化,以達到高效開發和維護的目的。討論了Qiankun的原理、如何設置主應用與子應用的通信,以及如何解決跨域問題和優化集成過程,從而實現前端應用的靈活擴展與組織。 ...
  • ‍ 寫在開頭 點贊 + 收藏 學會 在日常的開發過程中,我們都會有一些常用的代碼片段,這些代碼片段可以直接複製到各個項目中使用,非常方便。如果你有接手過別人的項目,就可以很明顯感受到幾個項目一般都會有一些相同的工具類方法,這些方法就是之前開發者的常用代碼片段。 現在前端社區相當完 ...
  • 這篇文章介紹瞭如何在Vue框架中實現自定義渲染器以增強組件功能,探討了虛擬DOM的工作原理,以及如何通過SSR和服務端預取數據優化首屏載入速度。同時,講解了同構應用的開發方式與狀態管理技巧,助力構建高性能前端應用。 ...
  • 應用場景: 實現目標: 在網頁端實現大文件(文件大小 >= 2 G) 斷點續傳 實際方案: 發送多次請求, 每次請求一部分文件數據, 然後通過續寫將文件數據全部寫入. 難點: 無法實現文件續寫, 最後採用 StreamSaver 來解決這個問題. 1. 首先從 git hub 將 StreamSav ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...