基于 Nuxt 4 + Vue 3 + Element Plus 的后台管理系统,采用 pnpm workspace + Turborepo 的 monorepo 架构。
- 框架:Nuxt 4、Vue 3、TypeScript
- UI:Element Plus、UnoCSS、Sass
- 状态管理:Pinia(持久化)
- 请求:Axios、VueUse
- 内部包:
@vuejs-repo/core(通用逻辑)、@vuejs-repo/element-plus(组件库)
# 安装依赖(项目根目录)
$ pnpm install
# 开发调试(apps/admin)
$ pnpm --filter admin dev
# 构建(使用 .env.production 环境变量)
$ pnpm --filter admin build
# 预览构建产物
$ pnpm --filter admin preview
# 生产环境启动(PM2)
$ pnpm --filter admin startapps/admin/
|- .env 本地环境变量
|- .env.production 生产环境变量
|- nuxt.config.ts Nuxt 配置
|- uno.config.ts UnoCSS 配置
|- package.json 依赖与脚本
|- processes.json PM2 部署配置
|- public/ 静态资源
| |- favicon.ico
| |- static/images/common/logo.png
|- app/
| |- app.vue 应用入口
| |- assets/styles/ 全局样式
| |- components/ 公共组件
| |- CategorySelect.vue 分类选择器
| |- composables/ 组合式函数
| |- useAdminAxios.ts 管理端 Axios 封装
| |- config/
| |- menu.tsx 菜单配置
| |- layouts/ 布局
| |- default.vue 默认布局(侧边栏 + 头部)
| |- root.vue 空布局(登录页)
| |- middleware/
| |- auth.global.ts 全局认证守卫
| |- pages/ 页面(基于文件路由)
| |- login/ 登录
| |- [module]/ads/ 轮播图管理
| |- [module]/categories/ 分类管理
| |- [module]/contents/ 内容管理
| |- plugins/
| |- library-defaults.ts 上传 / 列表 / 文件 URL 初始化
| |- stores/
| |- manager.ts 管理员状态(Pinia 持久化)
| |- types/ 类型定义
| |- utils/
| |- helpers.ts 工具函数(转发自 @vuejs-repo/core)
| |- request.ts 请求实例(公共 / 管理端 / 文件)
当前菜单包含以下模块,使用 [module] 动态路由复用页面:
| 模块 | 路由前缀 | 子页面 |
|---|---|---|
| 首页 | /home |
轮播图管理 |
| 新闻动态 | /news |
新闻管理、分类管理 |
页面放在 app/pages/ 下,遵循 Nuxt 文件路由约定:
|- [module]/contents/
| |- index.vue 列表页
| |- components/
| |- FormDialog.vue 表单弹窗
- Vue3 中文文档(官方)
- Vue3 中文文档
- Vue3 组合式 API(官方)
- Vue3 组合式 API
- Vue3 组合式 API 高阶指南
- Vue3 资源推荐
- Vue3 迁移指南
- Vue3 API 参考
- Vue3 风格指南
- 米修在线 - Vue3 快速上手指南
- 李南江 - Vue3 正式版教程
- 哈默聊前端 - Vue3
- 大地 - Vue3 教程
- Young 村长 - Composition API + 深度解读
- Young 村长 - Vue3 光速上手
- Young 村长 - 项目打包、部署、CI/CD
- 【Vue3 官方教程】🎄 万字笔记 | 同步导学视频
- vue3-study
- Vue-Mastery 学习笔记
- @vue/composition-api - 用于提供组合式 API 的 Vue 2 插件
- @vue/composition-api 速成课
- Vue Class Component v8 - The next Vue Class Component for Vue v3.
- Vue3 实战笔记
- 快速使用 Vue3 最新的 15 个常用 API
- free-tailwind-admin-dashboard-template
- shadcn-examples
- shadcn-vue-admin
- awesome-admin
- MineAdmin-Vue
- meimei-nestjs-admin
- ikun-ui
- plus-pro-components
- vtj
- View Shadcn UI
- element-plus-kit
- element-plus-x
- agile-admin
- element-plus-theme
- miitvip-vue-admin-manager
- nuxt-shadcn-dashboard
- M-Admin
- opentiny
- art-design-pro
- una-ui
- sz-admin
- continew-admin
- nova-admin
- Snowy
- smart-admin
- shadcn-admin
- primevue
- volt
- vue-pure-admin
- vue-vben-admin
- vue3-antdv-admin
- vue-admin-better
- vue-element-ui-admin(Vue3+ScriptSetup)
- v3-admin-vite
- vue-element-plus-admin
- SnowAdmin
- vue3-element-admin
- naive-ui-admin
- soybean-admin
- 后台集合
- Arco Design Pro
- fantastic-admin
- AdminLTE
- gin-vue-admin
- panis-admin