[管理后台模板] Admin 后台页面双版本模板 | HTML 42页与 Vue 9路由 – Sneat

Sneat 是一套面向 SaaS、项目管理、数据分析和内部业务系统的响应式管理后台模板。当前资源同时包含 HTML 与 Vue 两个独立版本：HTML 版采用 Bootstrap 5.1.3 并提供 42 个页面，Vue 版采用 Vue 3、Vuetify 3 与 Vite，并提供 9 个主要路由。两套源码共享相近的仪表盘视觉方向，但工程结构、组件体系和开发方式不同，也都没有内置账户、权限、数据库或业务接口后端。

源码目录以 1.0.0 版本标识，解压后可以分别进入 sneat-1.0.0-Html 和 sneat-1.0.0-VueJS。前者更适合直接修改静态页面和已编译资源，后者则需要安装依赖、使用 Vite 启动和构建。两套工程应根据项目技术栈择一改造，不建议混合部署。

HTML 与 Vue 版本的开发路径不同

HTML 版的页面覆盖范围更大，适合从文件中挑选布局和组件；Vue 版页面数量较少，但仪表盘卡片、账户设置、表格和表单已经拆成可复用组件。如果现有项目由服务端直接输出页面，HTML 版的改造路径更短；如果项目本身就是 Vue 应用或计划开发 SPA，Vue 版更容易接入既有组件和状态流程。

HTML 版 42 个页面覆盖后台骨架和组件示例

42 页不等于 42 个完整业务模块。很多文件实际是布局、Bootstrap 组件或表单样例，真正的业务首页主要是分析仪表盘；侧边栏中的 CRM、电商、物流、学院、邮件、聊天、日历和看板等 Pro 项目会跳往付费版演示，并不等于当前 HTML 资源目录已经包含这些本地业务页面。

Vue 版用 9 个主要路由组织组件化后台

Vue 版在 src/pages 中提供 Dashboard、Account Settings、Typography、Icons、Cards、Tables、Form Layouts、Login 与 Register 九个主要页面入口，并设置通配错误页。根路径默认重定向到 /dashboard，后台页面使用垂直导航布局，登录、注册和错误页使用空白布局。

项目包含 54 个 .vue 文件，收入、订单、财务标签和交易记录等仪表盘内容被拆成独立组件，表格与表单布局也有多种演示组件。Vue Router 负责前端路由，Pinia 已在入口注册，Vuetify 提供主要 UI 组件和主题基础，ApexCharts 用于仪表盘图表；主题切换与明暗资源同样属于前端表现层，不会自动产生业务数据。

路由使用 createWebHistory。部署到静态主机或子目录时，需要让服务器把未知路径回退到应用入口，并结合目标访问路径检查 Vite 的 base 配置，否则直接刷新 /dashboard、/login 等地址可能返回 404。

图表和表单是演示界面，真实数据仍需自行接入

HTML 版使用 ApexCharts、Perfect Scrollbar、Boxicons、jQuery、Masonry 和 Bootstrap 组件；Vue 版使用 Vue、Vuetify、Vue Router、Pinia、VueUse、ApexCharts 与 Chart.js 等依赖。两套仪表盘中的销售额、订单量、增长率、头像和交易记录都是演示数据，不能直接当作真实统计结果。

HTML 版的登录、注册和找回密码表单只指向本地页面，账户设置和部分组件表单会阻止默认提交。Vue 版虽然声明了 Axios 与 Mock Adapter，但当前页面没有完成真实接口调用。无论选择哪个版本，都需要自行补充身份认证、会话、权限、服务端校验、数据查询和持久化服务。

两个版本的启动与构建方式

HTML 版：直接编辑静态文件，构建工具按需使用

如果只是修改文案、Logo、颜色和静态数据，可以从 html/index.html、assets/css/demo.css 与 assets/js 开始，直接使用包内已经编译的资源。需要调整 Sass 源码或重新输出压缩文件时，再安装依赖并使用 npm run serve、npm run build 或 npm run build:prod；这套流程由 Gulp 与 Webpack 4 驱动。

Vue 版：使用 Node 与 Vite 开发

进入 VueJS 目录后先执行 npm install，开发时使用 npm run dev，生产构建使用 npm run build，本地检查构建结果可以使用 npm run preview。当前目录没有预生成的 dist 成品，因此不能像 HTML 版一样直接把源码目录当作静态站点部署。

MIT 许可与二次开发边界

源文章核对到 HTML 包附有 MIT 许可证文件，Vue 目录在当前解压审计副本中未见独立许可证文件，但两套项目均按 MIT License 记录。分发源码或主要代码副本时，应保留版权声明和许可证文本，并以随资源包提供的最新许可文件为准。本文没有把未执行的依赖安装、生产构建、浏览器兼容或接口联调写成测试结论。

建议先选版本，再收缩导航并连接真实数据

1. 先确定项目使用传统页面、服务端模板还是 Vue 单页应用，不要同时维护两套前端作为同一生产入口。
2. 按实际需求删除 Pro 外链、空白菜单和不使用的组件示例，避免把演示导航理解成已实现模块。
3. 替换 Sneat 标识、主色、字体、头像、插图和演示统计数据，统一页面标题与菜单名称。
4. 将图表与列表中的静态数组替换为接口数据，并补充加载、空数据、失败和权限不足状态。
5. 接入登录、注册和账户设置服务，补齐服务端校验、会话、权限与数据持久化。
6. HTML 版按实际引用清理第三方脚本；Vue 版检查路由回退、Vite 基础路径和最终构建产物。