Skip to content

Repository files navigation

关于

介绍

基于 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 start

项目结构

apps/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         表单弹窗

链接

文档

配套工具

视频

链接

开源

交互参考

About

基于 Nuxt 4 + Vue 3 + Element Plus 的后台管理系统,采用 pnpm workspace + Turborepo 的 monorepo 架构。

Topics

Resources

Stars

742 stars

Watchers

19 watching

Forks

Releases

Packages

Used by

Contributors

Languages