一套通用的企業級中後臺前端設計解決方案

Java陈序员發表於2024-08-29
前端

大家好，我是 Java陳序員。

今天，給大家介紹一套企業級中後臺前端/設計解決方案！

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

AntdvPro —— 一個基於 Vue3、Vite4、Ant-Design-Vue4、Pinia、UnoCSS 和 Typescript 的一整套企業級中後臺前端/設計解決方案。

AntdvPro 參考了阿里 React 版本 Antd-Pro 的設計模式，使用了最新最流行的前端技術棧，內建了動態路由、多主題、多佈局等功能，可以幫助你快速搭建企業級中後臺產品原型。

功能特色：

  • 高效快速：Vite4.x 加持，開發、打包、熱更新、熱載入、熱替換，一切都是那麼的快
  • 預設樣式：內建了一套基於 UnoCSS 的樣式系統，原子化的樣式，讓你的樣式更加簡潔
  • TypeScript：專案全量使用 TypeScript,讓你的程式碼更加規範，更加安全
  • Nitro Mock 服務：專案使用 Nitro 作為 Mock 服務，無侵入式的 Mock,讓你的 Mock 更加簡單
  • 國際化：提供了國際化的支援，滿足專案的國際化需求
  • 狀態管理：專案使用 Pinia 作為狀態管理，使用起來更加簡單

技術棧：

  • Vite
  • Vue3
  • Ant-Design-Vue4
  • Pinia
  • UnoCSS

專案截圖

登入頁

分析頁

監控頁

工作臺

整體風格設定

表單頁

連結

許可權模組

異常頁

結果頁

列表頁

詳情頁

個人頁

快速上手

環境要求：

  • NodeJS >= 16.0.0
  • Pnpm(建議最新版本) >= 7.0.0
  • Git

1、克隆程式碼

git clone https://github.com/antdv-pro/antdv-pro.git

2、切換到專案目錄

cd [your project name]

3、安裝依賴

pnpm install

4、啟動專案

pnpm run dev

5、打包專案

pnpm run build

6、啟動專案成功後，瀏覽器訪問：

http://localhost:6678/

預設使用者名稱密碼：admin/admin

AntdvPro 除了提供 TypeScript 版本，還有 JavaScript 版本，可根據情況進行選擇~

專案地址：https://github.com/antdv-pro/antdv-pro
JS版本：https://github.com/antdv-pro/antdv-pro/tree/feat-js
線上體驗：https://antdv-pro.com/dashboard/analysis
線上文件：https://docs.antdv-pro.com/

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

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

或者訪問網站，進行線上瀏覽：

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

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

相關文章