# Teek Design Vue3 Element Plus 中后台系统开发模板
# 一、项目名称

![图片](https://developer.qcloudimg.com/http-save/yehe-4141853/6f1c35310039474e5ee652fbb5a7fb9d.png)

# Teek Design Vue3

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

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

# 二、开源协议

- MIT

# 三、界面展示

![图片](https://developer.qcloudimg.com/http-save/yehe-4141853/4a38afc282c5db01dc9e828fad717e11.png)
- 典型中后台布局 + 多区域导航

![图片](https://developer.qcloudimg.com/http-save/yehe-4141853/d2987ea290ca0d4fa13db96c91716853.png)
- 组件/页面能力覆盖较全，偏“拿来就用”

![图片](https://developer.qcloudimg.com/http-save/yehe-4141853/6f1c35310039474e5ee652fbb5a7fb9d.png)
- 整体视觉风格统一，适合直接二开

# 四、功能概述

## 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：构建（前端）

```bash
git clone https://github.com/Kele-Bingtang/teek-design-vue3
cd teek-design-vue3
pnpm install
pnpm dev
```

- 访问地址：`http://localhost:8099/`

构建与预览：

```bash
pnpm build
pnpm preview
```

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

```bash
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` 默认代理到线上 `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`）。

# 八、目录结构与主要文件

```text
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：https://github.com/Kele-Bingtang/teek-design-vue3
- 在线预览：https://vue3-design.teek.top/
- 使用文档：https://vue3-design-docs.teek.top/


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

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

前端

后端

开发工具

TeekDesignVue3是一款基于Vue3+TypeScript+Vite+ElementPlus的中后台管理系统模板，提供多布局切换、RBAC权限体系、主题配置、丰富组件等功能。内置表格、表单、图表等业务组件，集成ECharts、TinyMCE等常用库，支持工程化规范与团队协作开发。开箱即用，适合企业后台、数据看板等场景开发。

包管理器

TypeScript

路由

GitHub

腾讯云BI新客户首次购买9.9元起！


文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

TeekDesignVue3是一款基于Vue3+TypeScript+Vite+ElementPlus的中后台管理系统模板，提供多布局切换、RBAC权限体系、主题配置、丰富组件等功能。内置表格、表单、图表等业务组件，集成ECharts、TinyMCE等常用库，支持工程化规范与团队协作开发。开箱即用，适合企业后台、数据看...

Teek Design Vue3 Element Plus 中后台系统开发模板-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐