一個簡潔、乾淨的中後臺管理模板

Java陈序员發表於2024-04-27

大家好，我是 Java陳序員。

今天，給大家介紹一個簡潔、開源的中後臺管理模板專案。

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

專案介紹

nova-admin —— 一個基於Vue3、Vite5、Typescript、Naive UI, 簡潔乾淨後臺管理模板。

nova-admin 追求用簡單的方式實現完整功能，無過度封裝，方便二次開發。

功能特性：

  • 最新技術棧：基於Vue3、Vite5、TypeScript、NaiveUI、Unocss等最新技術棧開發
  • 網路請求：提供完善的網路請求封裝，提供統一的響應處理和多場景能力
  • 許可權管理：完善的前後端許可權管理方案
  • 路由配置：支援本地靜態路由和後臺返回動態路由，路由簡單易配置
  • 主題適配：支援暗黑主題適配，介面樣式保持Naive風格
  • 程式碼規範：僅在提交時進行eslint校驗，沒有過多限制，開發更簡便
  • 國際化：支援多語言（i18n）
  • 路由管理：支援本地靜態路由和後臺返回動態路由，簡單易配置

專案截圖

快速開始

環境準備：

  • Node.js 20.x
  • pnpm 8.x

1、拉取程式碼

git clone https://github.com/chansee97/nova-admin.git

2、安裝依賴

pnpm install

3、本地啟動

pnpm run dev

4、打包部署

pnpm run build

5、指令碼說明

"scripts": {
    // 啟動本地開發模式，mode標識為dev，埠號9980
    "dev": "vite --mode dev --port 9980",
    // 啟動本地開發模式，mode標識為test（埠vite預設5173）
    "dev:test": "vite --mode test",
    // 啟動本地開發模式，mode標識為prod（埠vite預設5173）
    "dev:prod": "vite --mode prod",
    // 進行型別檢查 並使用vite構建，mode標識為prod
    "build": "vue-tsc --noEmit && vite build --mode prod",
    // 進行型別檢查 並使用vite構建，mode標識為dev
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    // 進行型別檢查 並使用vite構建，mode標識為test
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    // 預覽打包後的產物，埠號9981
    "preview": "vite preview --port 9981",
    // 使用eslint檢查程式碼
    "lint": "eslint .",
    // 使用eslint檢查並自動修復程式碼
    "lint:fix": "eslint . --fix",
    // 視覺化檢視eslint規則配置
    "lint:check": "npx @eslint/config-inspector",
    // 使用vite-bundle-visualizer外掛分析打包產物
    "sizecheck": "npx vite-bundle-visualizer"
}

最後

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

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

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

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

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

相關文章