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']指向https://vue3-design.teek.top，并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 -> https://vue3-design.teek.top（见vite.config.mts），需要可访问外网
方式 1：构建（前端）
git clone https://github.com/Kele-Bingtang/teek-design-vue3
cd teek-design-vue3
pnpm install
pnpm dev
- 访问地址：
http://localhost:8099/
构建与预览：
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
- Node：
- 本地开发启动方式：
pnpm dev（默认端口来自.env的VITE_PORT，默认8099）- 接口走
/api，Vite 已做代理（见vite.config.mts）
- 常见问题 3 条以内：
- 访问接口失败：内网/离线环境下，
/api默认代理到线上https://vue3-design.teek.top，需要替换为你的后端地址（改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/
