Teek Design Vue3 Element Plus 中后台系统开发模板

Teek Design Vue3 Element Plus 中后台系统开发模板

一、项目名称

Teek Design Vue3

一句话简介：基于 Vue3 + TypeScript + Vite + Element Plus 的中后台管理系统解决方案，内置布局/权限/主题/常用业务组件，开箱即用。

适用场景（可选）：

• 企业内部管理后台（用户/权限/菜单/审计等模块）
• 数据看板/运维平台（表格 + 图表 + 多标签页）
• Portal/多系统聚合（IFrame 嵌入式子系统）

二、开源协议

• MIT

三、界面展示

• 典型中后台布局 + 多区域导航

• 组件/页面能力覆盖较全，偏“拿来就用”

• 整体视觉风格统一，适合直接二开

四、功能概述

1）布局系统（多布局切换）

• 是什么：纵向/经典/横向/分栏/混合/嵌入等多种布局形态，适配不同信息架构。
• 怎么做：布局实现集中在 src/layout，不同布局以目录拆分（如 layout-classic、layout-horizontal 等），主入口通过布局组件组合。
• 注意事项（可选）：布局切换通常牵涉菜单渲染、标签页、KeepAlive、权限路由；二开时优先沿现有布局扩展，避免“混搭导致状态不一致”。

2）权限体系（RBAC + 菜单/路由/按钮）

• 是什么：内置基于 RBAC 的访问控制思路，覆盖菜单、路由、按钮级别的权限管理。
• 怎么做：路由与守卫位于 src/router（含 guards、routes），通常在路由前置守卫中完成鉴权与动态路由注入。
• 注意事项（可选）：项目支持不同路由权限模式（见 .env：VITE_ROUTE_ACCESS_MODE），切换模式前先梳理“后端是否提供菜单/权限接口”。

3）主题与视觉配置（主题色/暗色/色弱等）

• 是什么：提供丰富的 CSS 主题变量与布局变量，支持主题色、浅色/深色、色弱等模式。
• 怎么做：样式变量与全局样式入口集中在 src/common/styles（Vite SCSS 通过 vite.config.mts 的 additionalData 全局注入）。
• 注意事项（可选）：如果你计划替换设计规范，建议从“变量层”改起，而不是逐页覆盖样式。

4）组件体系与页面能力（表格/表单/编辑器/图表）

• 是什么：在 Element Plus 之上叠加了大量“中后台高频组件”，并提供页面级组件组合。
• 怎么做：业务组件主要在 src/components，页面示例在 src/views（如 table、editor、excel、dashboard 等）。
• 对外部依赖要显式说明：内置集成 ECharts、CodeMirror、TinyMCE、WangEditor、xlsx 等（打包拆包策略在 vite.config.mts 的 manualChunks 可见）。

5）工程化与质量控制（可直接用于团队协作）

• 是什么：ESLint / Prettier / Stylelint / Husky / Commitlint / Lint-staged 等一套规范链路。
• 怎么做：规则与钩子在根目录配置（如 eslint.config.js、.prettierrc.json、.stylelintrc.js、.husky/）。
• 注意事项（可选）：CI 场景下建议固定 Node & pnpm 版本，否则 lint/format 容易出现差异。

6）开发联调（本地代理 + 线上演示接口）

• 是什么：默认把 /api 代理到线上预览站点接口，拉下来就能看到“有数据的效果”。
• 怎么做：vite.config.mts 中配置了 server.proxy['/api'] 指向 ，并 rewrite 去掉 /api 前缀。
• 注意事项（可选）：离线/内网环境下需要你替换代理目标或接入自建后端，否则与接口相关页面会不可用。

五、技术选型

• 前端：Vue 3 · TypeScript · Vite
• UI：Element Plus · @element-plus/icons-vue · SCSS
• 路由与状态：Vue Router · Pinia · pinia-plugin-persistedstate
• 网络请求：Axios · qs
• 可视化/富文本/代码编辑：ECharts · TinyMCE · WangEditor · CodeMirror
• 国际化：vue-i18n
• 工程化：ESLint · Prettier · Stylelint · Husky · Commitlint · lint-staged
• 构建优化：vite-plugin-compression（gzip）、Rollup 手动拆包（见 vite.config.mts）

六、如何使用

准备说明（先看这个）：

• Node 版本：package.json 指定 node >= 22.12.0
• 包管理器：推荐 pnpm
• 默认端口：8099（见 .env：VITE_PORT = 8099）
• 接口代理：默认 /api -> （见 vite.config.mts），需要可访问外网

方式 1：构建（前端）

git clone 
cd teek-design-vue3
pnpm install
pnpm dev

• 访问地址：

构建与预览：

pnpm build
pnpm preview

多环境构建（仓库已提供）：

pnpm build:sit
pnpm build:uat
pnpm build:prod

七、二次开发注意事项

• 环境依赖版本（尽量从 package.json 推断）：
  • Node：>= 22.12.0
  • TypeScript：~5.9.2
  • Vite：^7.1.3
• 本地开发启动方式：
  • pnpm dev（默认端口来自 .env 的 VITE_PORT，默认 8099）
  • 接口走 /api，Vite 已做代理（见 vite.config.mts）
• 常见问题 3 条以内：
  • 访问接口失败：内网/离线环境下，/api 默认代理到线上 ，需要替换为你的后端地址（改 vite.config.mts 的 server.proxy 或调整 .env.development 的 VITE_API_URL 策略）。
  • Node 版本不匹配：依赖安装报错时先对齐 Node（package.json#engines.node）。
  • 静态部署 404：若使用 history 路由，Nginx 需要做 SPA fallback（把所有路由回退到 index.html）。

八、目录结构与主要文件

teek-design-vue3/
├─ node/                      # Vite 插件/构建相关脚本（env 包装、插件列表、优化配置等）
├─ public/                    # 静态资源（不经 Vite 处理直接拷贝）
├─ src/
│  ├─ common/                 # 通用能力：assets/config/http/utils/styles/i18n 等
│  ├─ components/             # 可复用组件（基于 Element Plus 的封装与业务组件）
│  ├─ composables/            # 组合式函数（Hooks），沉淀通用交互与状态逻辑
│  ├─ layout/                 # 多布局实现（classic/horizontal/vertical/mixins/iframe 等）
│  ├─ pinia/                  # Pinia 入口、插件与 stores
│  ├─ router/                 # 路由定义与守卫（权限、动态路由等）
│  ├─ types/                  # TS 类型定义
│  ├─ views/                  # 页面示例集合（dashboard/table/editor/permission/iframe...）
│  ├─ App.vue                 # 根组件
│  └─ main.ts                 # 应用入口（挂载、插件注册等）
├─ .env                       # 全局默认配置（端口、打包开关、权限模式等）
├─ .env.development           # 开发环境配置（API 前缀、路由模式等）
├─ vite.config.mts            # Vite 配置（别名、代理、拆包、全局 SCSS 注入）
├─ package.json               # 依赖与脚本（pnpm dev/build/preview、lint 等）
└─ README.md                  # 项目介绍、预览与特性说明

九、源码地址

• GitHub：github.com/Kele-Bingta…
• 在线预览：vue3-design.teek.top/
• 使用文档：vue3-design-docs.teek.top/