Nova Admin

花匠小妙招
2024-12-05 20:36

Nova Admin - 简洁干净、免费开源的后台管理系统，基于Vue3 / Vite5 / Typescript / Naive UI 等前端开发技术栈

今天看到一款 Vue3 后台管理 admin 系统，研究了一下发现很不错，推荐给大家。

Nova-admin 是一个颜值在线，风格清新、简洁干净后台管理模板，包含了平时常用的管理后台功能页面模板。基础的 UI 组件基于我之前推荐的 naive-ui 开发，我十分喜欢这款组件库，所以我花了点时间了解这款 admin 框架，发现很不错，于是就写一篇文章来介绍给大家。

nova admin 官网主页

技术特性

整体框架基于 Vue3 / Vite5 / TypeScript / NaiveUI / Unocss 等目前前端最新技术栈开发；基于 Alova 封装和配置，提供统一的响应处理和多场景能力；拥有完善的前后端权限管理方案，轻松配置权限；支持本地静态路由和后台返回动态路由，路由配置简单易用；对日常使用频率较高的组件二次封装，满足基础工作需求；适配了黑暗主题，组件界面样式保持原有的 Naive-ui 风格；仅在代码提交时进行 eslint 校验，没有过多限制，开发更简便；支持国际化(i18n)；界面样式布局灵活，容易配置。

开发上手体验和使用建议

在互联网项目的初始阶段，admin 往往是最优先开发的项目，用来对整个项目的支持。为了实现这样的后台管理系统，我们一般都会选择一款好用的 admin 系统。Nova Admin 采用了目前很新的前端技术趋势，可以很好地帮助我们提高开发效率。

nova admin 主控台

简单看了一下源码，Nova Admin 的作者开发时尽可能用了简单的方式实现常用的功能，并尽代码书写规范，便于维护，易读易理解，并且无过度封装，方便二次开发。

获取源码，构建项目

要构建项目，我们需要将项目源码拉取到本地，比如我们用 git 命令：

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

然后进入项目目录，安装项目所有的依赖：

pnpm i

成功后就可以启动项目进行开发了。具体的脚本命令如下：

"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" }

根据官网的文档，做好请求服务、路由和菜单、以及环境变量的配置，就可以运行项目来开发。可以说是开箱即用了。