# UniversalKit

**Repository Path**: template-warehouse/universal-kit

## Basic Information

- **Project Name**: UniversalKit
- **Description**: UniversalKit：一个多功能开源工具库，提供丰富的组件和API，支持跨平台开发，旨在简化开发流程，加速应用构建。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-10
- **Last Updated**: 2026-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniversalKit

<p align="center">
  <img src="https://img.shields.io/badge/version-1.0.0-blue" alt="Version">
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License">
  <img src="https://img.shields.io/badge/author-Forever%20顾北-orange" alt="Author">
</p>

> 一个多技术栈前端模板仓库，沉淀可复制、可改造、可落地的后台管理与 UI 示例工程。
>
> **通过简单修改和复制粘贴，就能快速搭建成符合自己想法的项目。**

---

## 项目简介

UniversalKit 按技术栈拆分子项目，当前重点维护 `html-ui`、`vue2-kit`、`vue3-kit`、`vue3-ts-kit` 四套模板。仓库内同时保留工程规范、提交规范、脚本入口和功能文档，便于后续继续扩展 React、Flutter、uni-app 等方向。

**核心特性：**

- **多技术栈模板** - 原生 HTML、Vue2、Vue3、Vue3 + TypeScript，后续可继续扩展 React / Flutter / uni-app
- **后台管理常用场景** - 登录注册、首页、仪表盘、表单、表格、图表、组件、错误页、资料页
- **主题体系** - 深色模式、6 套预设主题、CSS 变量运行时换肤
- **权限系统** - 路由级权限 + 按钮级 `v-permission` 指令
- **国际化** - 中文、英文、日文、韩文语言包
- **Mock 全链路** - Vite Mock + Axios 拦截封装，便于脱离后端独立开发
- **工程化约束** - ESLint、Prettier、Husky、Commitlint、lint-staged

---

## 软件架构

| 目录 | 技术栈 | 状态 | 说明 |
| --- | --- | --- | --- |
| [html-ui](./html-ui) | HTML / CSS / JavaScript | 可用 | 原始静态 UI 模板与页面资产 |
| [vue2-kit](./vue2-kit) | Vue 2.7 + Vite + Element UI + Vuex | 完成 | Vue2 后台管理模板，文档与截图完整 |
| [vue3-kit](./vue3-kit) | Vue 3.5 + Vite + Element Plus + Pinia | 完成 | Vue3 后台管理模板，已完成迁移、构建与 lint 校验 |
| [vue3-ts-kit](./vue3-ts-kit) | Vue 3.5 + TypeScript + Vite + Element Plus + Pinia | 完成 | Vue3 + TypeScript 后台管理模板，已完成迁移与 lint 校验 |
| react-kit | React | 规划中 | 预留 React JavaScript 版本 |
| react-ts-kit | React + TypeScript | 规划中 | 预留 React TypeScript 版本 |
| flutter-kit | Flutter | 规划中 | 预留跨端应用模板 |
| uniapp-kit | uni-app | 规划中 | 预留多端统一开发模板 |

---

## 项目展示

### Vue3 Kit

> 完整文档：[vue3-kit/README.md](./vue3-kit/README.md) | 功能文档：[vue3-kit/docs/README.md](./vue3-kit/docs/README.md)

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./vue3-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./vue3-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./vue3-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./vue3-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./vue3-kit/docs/images/form-basic.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./vue3-kit/docs/images/form-advanced.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>图表页面</b><br/><img src="./vue3-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
    <td align="center"><b>表格页面</b><br/><img src="./vue3-kit/docs/images/table-bootstrap.png" alt="表格页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./vue3-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./vue3-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./vue3-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./vue3-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./vue3-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./vue3-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### Vue3 TS Kit

> 完整文档：[vue3-ts-kit/README.md](./vue3-ts-kit/README.md) | 功能文档：[vue3-ts-kit/docs/README.md](./vue3-ts-kit/docs/README.md)

Vue3 TS Kit 与 Vue3 Kit 保持相同的页面结构和功能模块，在此基础上全面引入 TypeScript 类型系统，适合对类型安全有更高要求的项目。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./vue3-ts-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./vue3-ts-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./vue3-ts-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./vue3-ts-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./vue3-ts-kit/docs/images/form-basic.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./vue3-ts-kit/docs/images/form-advanced.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>图表页面</b><br/><img src="./vue3-ts-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
    <td align="center"><b>表格页面</b><br/><img src="./vue3-ts-kit/docs/images/table-bootstrap.png" alt="表格页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./vue3-ts-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./vue3-ts-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./vue3-ts-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./vue3-ts-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
</table>

### Vue2 Kit

> 完整文档：[vue2-kit/README.md](./vue2-kit/README.md) | 功能文档：[vue2-kit/docs/README.md](./vue2-kit/docs/README.md)

Vue2 Kit 与 Vue3 Kit 保持相近的页面结构、功能组织和文档逻辑，适合需要继续维护 Vue2 项目或做迁移对照的场景。

---

## Vue3 Kit 功能清单

### 技术栈

| 分类 | 选型 |
| --- | --- |
| 框架 | Vue 3.5 + `@vue/compat` |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia 3 + Vuex 兼容适配 |
| UI 库 | Element Plus 2.10 + 自动按需引入 |
| 构建 | Vite 6 |
| 请求 | Axios + Mock 拦截 |
| Mock | vite-plugin-mock + mockjs |
| 图表 | ECharts 5 |
| 富文本 | WangEditor 5 |
| 脑图 | Mind Elixir 5 |
| 主题 | SCSS 变量 + CSS 变量运行时换肤 |
| 规范 | ESLint + Prettier |

### 功能模块

- **登录注册** - 表单校验、验证码、演示账号填充、登录状态维护
- **首页概览** - 统计卡片、趋势图、活跃度、项目分布、任务列表
- **仪表盘** - 热力图、关系图、树图、系统负载、快捷操作
- **表单模块** - 基础表单、高级表单、自动补全、上传、富文本、校验提示
- **组件展示** - 卡片、日历、图库、加载按钮、通知、预加载、图标、弹窗系统
- **表格模块** - 基础表格、Bootstrap 风格表格、数据表格、通用表格组件
- **图表可视化** - 漏斗、桑基、箱线、K 线、树图、旭日、仪表盘、迷你图等
- **页面模板** - 个人资料、联系人、发票、定价、关于页、错误页
- **权限系统** - 动态路由权限、按钮级权限、自定义权限指令
- **国际化** - 中 / 英 / 日 / 韩语言包与运行时切换
- **主题换肤** - 6 套预设主题、深色模式、持久化主题偏好

---

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- yarn >= 1.22.0

### Vue3 Kit

```bash
cd vue3-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60002`

### Vue3 TS Kit

```bash
cd vue3-ts-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60003`

### Vue2 Kit

```bash
cd vue2-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口以子项目 Vite 配置为准。

---

## 脚本体系

仓库提供根目录脚本与 `scripts/` 批处理脚本，适合 Windows 环境快速安装、启动、构建和清理。

| 脚本 | 说明 |
| --- | --- |
| [run.sh](./run.sh) | 根目录一键启动脚本 |
| [install.sh](./install.sh) | 根目录一键安装脚本 |
| [scripts/全部-菜单.bat](./scripts/全部-菜单.bat) | Windows 交互式菜单 |
| [scripts/vue2-kit-安装.bat](./scripts/vue2-kit-安装.bat) | Vue2 Kit 依赖安装 |
| [scripts/vue2-kit-启动.bat](./scripts/vue2-kit-启动.bat) | Vue2 Kit 开发启动 |
| [scripts/vue2-kit-构建.bat](./scripts/vue2-kit-构建.bat) | Vue2 Kit 生产构建 |
| [scripts/vue2-kit-清除.bat](./scripts/vue2-kit-清除.bat) | Vue2 Kit 缓存清理 |
| [scripts/vue3-kit-安装.bat](./scripts/vue3-kit-安装.bat) | Vue3 Kit 依赖安装 |
| [scripts/vue3-kit-启动.bat](./scripts/vue3-kit-启动.bat) | Vue3 Kit 开发启动 |
| [scripts/vue3-kit-构建.bat](./scripts/vue3-kit-构建.bat) | Vue3 Kit 生产构建 |
| [scripts/vue3-kit-清除.bat](./scripts/vue3-kit-清除.bat) | Vue3 Kit 缓存清理 |
| [scripts/vue3-kit-重命名文档.bat](./scripts/vue3-kit-重命名文档.bat) | Vue3 Kit 文档重命名 |

Vue3 Kit 也可直接使用子项目内 `yarn` 脚本：

```bash
cd vue3-kit
yarn lint:check
yarn format:check
yarn build
```

---

## 目录结构

```text
universal-kit/
├─ docs/                    # 仓库级工程规范
│  ├─ CODE_STYLE.md
│  ├─ COMMIT_CONVENTION.md
│  └─ PROJECT_STRUCTURE.md
├─ html-ui/                 # 原生 HTML UI 模板
│  ├─ css/
│  ├─ data/
│  ├─ icons/
│  ├─ img/
│  ├─ js/
│  ├─ vendor/
│  └─ *.html
├─ scripts/                 # Windows 批处理脚本
├─ vue2-kit/                # Vue2 后台管理模板
│  ├─ docs/
│  ├─ mock/
│  ├─ public/
│  ├─ src/
│  ├─ package.json
│  └─ vite.config.js
├─ vue3-kit/                # Vue3 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ directives/        # 自定义指令
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Pinia / Vuex 兼容状态层
│  │  ├─ utils/             # 工具函数
│  │  └─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.js
├─ vue3-ts-kit/             # Vue3 + TypeScript 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ directives/        # 自定义指令
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Pinia 状态层
│  │  ├─ utils/             # 工具函数
│  │  └─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.ts
├─ .husky/                  # Git hooks
├─ commitlint.config.cjs    # 提交信息校验
├─ package.json             # 仓库级依赖与 hooks
└─ README.md
```

---

## 文档索引

### 仓库级文档

- [代码风格规范](./docs/CODE_STYLE.md)
- [提交规范](./docs/COMMIT_CONVENTION.md)
- [项目结构规范](./docs/PROJECT_STRUCTURE.md)

### Vue3 Kit 文档

- [Vue3 Kit README](./vue3-kit/README.md)
- [Vue3 Kit 文档索引](./vue3-kit/docs/README.md)
- [Axios 与 Mock 配置指南](./vue3-kit/docs/Axios与Mock配置指南.md)
- [权限模块使用指南](./vue3-kit/docs/权限模块使用指南.md)
- [消息服务使用指南](./vue3-kit/docs/消息服务使用指南.md)
- [富文本编辑器使用指南](./vue3-kit/docs/富文本编辑器使用指南.md)
- [组件目录结构规范](./vue3-kit/docs/组件目录结构规范.md)
- [截图说明](./vue3-kit/docs/截图说明.md)

### Vue3 TS Kit 文档

- [Vue3 TS Kit README](./vue3-ts-kit/README.md)
- [Vue3 TS Kit 文档索引](./vue3-ts-kit/docs/README.md)
- [Axios 与 Mock 配置指南](./vue3-ts-kit/docs/Axios与Mock配置指南.md)
- [权限模块使用指南](./vue3-ts-kit/docs/权限模块使用指南.md)
- [消息服务使用指南](./vue3-ts-kit/docs/消息服务使用指南.md)
- [富文本编辑器使用指南](./vue3-ts-kit/docs/富文本编辑器使用指南.md)
- [组件目录结构规范](./vue3-ts-kit/docs/组件目录结构规范.md)
- [截图说明](./vue3-ts-kit/docs/截图说明.md)

### Vue2 Kit 文档

- [Vue2 Kit README](./vue2-kit/README.md)
- [Vue2 Kit 文档索引](./vue2-kit/docs/README.md)

---

## 工程化

### 代码检查

```bash
cd vue3-kit
yarn lint
yarn lint:check
```

### 代码格式化

```bash
cd vue3-kit
yarn format
yarn format:check
```

### 提交规范

仓库采用 [Conventional Commits](https://www.conventionalcommits.org/)：

| Type | 含义 | 示例 |
| --- | --- | --- |
| feat | 新增功能 | `feat(vue3-kit): 新增用户页面` |
| fix | 修复问题 | `fix(vue3-kit): 修复图表初始化` |
| docs | 文档改动 | `docs: 更新 README` |
| style | 格式调整 | `style(vue3-kit): 统一代码格式` |
| refactor | 重构 | `refactor(vue3-kit): 优化权限工具` |
| perf | 性能优化 | `perf(vue3-kit): 优化首屏加载` |
| test | 测试 | `test(vue3-kit): 补充表单测试` |
| build | 构建或依赖 | `build(vue3-kit): 调整 Vite 配置` |
| ci | CI 配置 | `ci: 新增构建检查` |
| chore | 杂项维护 | `chore: 更新脚本` |

完整规范见 [docs/COMMIT_CONVENTION.md](./docs/COMMIT_CONVENTION.md)。

---

## 当前校验状态

Vue3 Kit / Vue3 TS Kit 当前已通过：

```bash
yarn lint:check
yarn type:check
yarn build
```

构建时可能出现来自第三方 `@vueuse/core` 的 Rollup PURE 注释提示，该提示不会阻断构建，也不是项目源码错误。

---

## 开源协议

本项目采用 [MIT](./LICENSE) 协议。

你可以自由使用、修改和分发本项目代码，但请保留原始版权信息和作者署名。

---

## 作者信息

- 作者：Forever 顾北
- 格言：代码是写给人看的，顺便让机器执行。

---

## 免责声明

未经授权，禁止移除本项目中的版权信息和作者署名。

本项目仅供学习交流使用，请勿用于非法用途。

---

<p align="center">
  © 2026 UniversalKit. All rights reserved. | Powered by Forever 顾北
</p>