%20(2).svg)
项目简介
本项目是基于 Vite 和 Vue3 的现代 Web 开发模板，融合 TypeScript、UnoCss、Pinia 等主流技术与插件。旨在帮助开发者节省项目配置时间，结合现代开发架构，提升 Web 应用开发效率。
项目的主要特性和功能
- 开发工具与框架：用 Vite 构建，结合 Vue3 和 TypeScript 实现快速构建与类型检查。
- 路由与布局：支持文件路由和布局系统，目录结构即路由，可设默认与非默认布局。
- Mock 与请求：有 Mock 支持可模拟接口数据，支持 SWR 请求，用
vue - request简化请求处理。 - 自动引入：实现 Api、组件和图标自动引入，减少手动导入代码量。
- 状态管理：用 Pinia 管理状态，简单易用且对 TypeScript 支持好。
- 样式与模式：集成 UnoCss 原子 CSS 库，支持暗黑模式切换。
- 开发辅助：有跳转进度条、开发面板、插件自动加载等辅助功能。
- 测试与规范：支持 Vitest 单元测试，有统一代码规范与风格，生产环境自动移除开发日志。
- 其他特性：支持 Markdown 渲染、i18n 国际化、tsx 语法、gzip 资源压缩等，提供全局通用 toast 通知和 axios 请求封装。
安装使用步骤
复制模板
- Gitee：
git clone git@gitee.com:dishait/tov-template.git
安装依赖
该模板仅支持 pnpm 包管理器，若未安装，可参考 安装教程。安装依赖命令：pnpm install
开发
- 启动开发服务器：
pnpm dev - 开启 host：
pnpm dev:host - 自动打开浏览器：
pnpm dev:open
预览
- 启动预览：
pnpm preview - 开启 host：
pnpm preview:host - 自动打开浏览器：
pnpm preview:open
打包
- 正常打包：
pnpm build - 调试打包：
pnpm build:debug
单元测试
- 执行单元测试：
pnpm test - 生成单元测试报告：
pnpm coverage
类型检查
执行类型检查：pnpm typecheck
自动创建与移除
- 自动创建页面或组件：
pnpm auto:create - 自动移除页面或组件：
pnpm auto:remove
依赖更新
- 更新依赖版本：
pnpm deps:fresh - 重新执行包安装命令：
pnpm i
代码规范校验
- 校验代码规范：
pnpm lint - 校验时修复：
pnpm lint:fix
注意事项
推荐使用 node 当前的长期维护版本 v18。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】