用最新前端技术栈搭建简洁干净、可二次开发的后台管理模板

方案简介

用最新前端技术栈搭建简洁干净、可二次开发的后台管理模板。Vue3+Vite6+TS 提供现代开发底座，NaiveUI/pro-naive-ui 负责界面与布局，Unocss 处理原子化样式，alova 统一封装请求，Pinia 管状态，i18n 做多语言

亮点与能力

项目 README「特性」小节列出了 Nova-admin 的实际能力：

• 基于 Vue3、Vite6、TypeScript、NaiveUI、Unocss 等最新技术栈开发
• 基于 alova 封装和配置，提供统一的响应处理和多场景能力
• 完善的前后端权限管理方案
• 支持本地静态路由和后台返回动态路由，路由简单易配置
• 对日常使用频率较高的组件二次封装，满足基础工作需求
• 黑暗主题适配，界面样式保持 Naive 风格
• 仅在提交时进行 eslint 校验，没有过多限制，开发更简便
• 基于 pro-naive-ui 的界面布局，灵活可配置
• 多语言（i18n）支持

组成与分工

组合中各成员在 Nova-admin 中分别承担以下角色：

• Vue 3：核心前端框架，提供 Composition API 等现代能力
• Vite 6：构建与开发服务器，支撑快速冷启动与构建
• TypeScript：提供类型系统与工程化约束
• Naive UI：基础组件库，承载界面样式与组件
• pro-naive-ui：在其之上提供更灵活可配置的布局与高级封装
• Unocss：原子化 CSS 引擎，处理样式与暗黑主题
• alova：HTTP 请求库，统一封装与响应处理
• Pinia：状态管理，承载全局数据
• vue-i18n：多语言切换
• vue-router：本地静态与后台动态路由的承载者
• Docker Compose：在生产环境中一键编排前端产物与 Nginx
• Nginx：作为生产环境的静态资源与反向代理服务器

前置要求

本地开发环境要求：

• Node.js 21.x
• 包管理器：pnpm 10.x（推荐使用 pnpm）
• 生产部署可选：Docker / Docker Compose

# install dependencies
pnpm i

实施步骤

1. 获取源码

推荐直接下载项目 Releases 页面提供的压缩包，或克隆仓库。

2. 安装依赖

进入项目目录，使用 pnpm 安装依赖：

# install dependencies
pnpm i

3. 本地启动开发服务器

# Run
pnpm dev

4. 构建生产产物

# Build product
pnpm build

5. 生产环境 Docker 部署

在生产环境可以使用 docker-compose 部署 nova-admin：

# Build product
docker compose -f docker-compose.product.yml up --build -d

关于 nginx.conf 只供参考，你可以根据自己的需求进行调整。

6. 接口联调

本项目使用 ApiFox 进行接口 mock，可在「接口文档」小节查看在线文档以了解接口详情。

注意事项与常见问题

使用 Nova-admin 时需注意：

• ESLint 规则较宽松：仅在提交时进行 eslint 校验，没有过多限制，团队若希望更严格的工程规范需自行加强
• 生产 nginx.conf：README 明确指出「关于 nginx.conf 只供参考」，需要根据实际部署需求自行调整
• 配套后端：相关项目 Nova-admin-nest（基于 NestJs、typeorm 的配套后台）仍在开发中，使用时需评估后端可用性
• 项目仍在迭代：Nova-Admin 目前仍然在优化迭代中，使用前建议关注 Releases 与更新日志

优缺点

• ✓ 技术栈新且统一
• ✓ 支持本地+动态路由
• ✕ ESLint 仅在提交时校验

出处

本方案挖掘自开源项目 chansee97/nova-admin，方案内容与实施命令均来自其 README 原文。