方案简介

tov-template 是一个以 Vite + Vue3 + TypeScript 为核心的「开箱即用」现代 web 开发模板。它把文件路由、布局系统、Mock、Api/组件/图标自动引入、VueUse、UnoCss、暗黑模式、pinia 状态管理、单元测试、i18n 等众多能力预先整合好，开发者克隆后即可直接编写业务代码。

它解决的问题是：新项目启动时在构建工具、插件配置、代码规范上浪费大量时间。正如 README 动机所言：「为下次开发节省浪费在配置上的时间」「结合主流插件整合现代开发架构，提高开发效率」。适合不想浪费时间在项目配置上、希望用更现代方式开发 web 应用提高效率的团队与个人。

亮点与能力

模板提供的主要能力包括：

• 文件路由：目录结构即路由，支持动态路由与 404 路由
• 布局系统：默认布局与非默认布局（通过 route meta 指定）
• Mock 支持：mock 目录导出 api 即可模拟请求
• Api / 组件 / 图标自动引入，无需手写 import
• VueUse 支持
• UnoCss 原子化样式与暗黑模式支持
• pinia 状态管理
• SWR 请求支持、全局通用 axios 请求封装
• Vitest 单元测试支持与测试报告生成
• i18n 国际化支持
• Markdown 渲染、tsx 支持、路径别名支持
• 命令行自动创建与删除页面
• gzip 资源压缩、生产环境自动移除开发日志
• 自动生成环境变量类型声明、renovate 自动更新依赖、自动版本更新并生成 CHANGELOG
• dockerfile 静态 go 服务、lightningcss 支持

组成与分工

• Vite：构建工具，可在根目录 vite.config.ts 配置构建，众多主流插件的繁杂配置已整合到根目录下的预设 presets 中
• Vue3：前端框架核心
• TypeScript：类型系统，支持类型检查（pnpm typecheck）
• unplugin-vue-router：实现文件路由，目录结构即路由
• unplugin-auto-import：Api 按需自动引入，支持 vue、pinia、vue-router、@vueuse/core 等库
• unplugin-vue-components：src/components 下组件按需自动引入，也支持 Naive ui 等组件库
• vite-plugin-mock：Mock 支持，在根目录 mock 目录导出 api 资源
• vue-request：SWR 风格请求（useRequest），也可换成 axios 等
• Pinia：状态管理，src/stores 导出自动引入
• UnoCss：原子化 CSS 与暗黑模式
• Vitest：单元测试

前置要求

• Node 版本：推荐使用 node 当前的长期维护版本 v20
• 包管理器：该模板仅支持 pnpm，需先安装 pnpm

克隆模板：

shell
git clone git@github.com:dishait/tov-template.git

或使用 Gitee：

shell
git clone git@gitee.com:dishait/tov-template.git

或使用 degit：

shell
npx degit https://github.com/dishait/tov-template#main

实施步骤

从零到跑通的步骤如下：

1. 克隆模板

shell
git clone git@github.com:dishait/tov-template.git

2. 安装依赖

shell
pnpm install

3. 本地开发

shell
pnpm dev

开启 host

pnpm dev:host

自动打开浏览器

pnpm dev:open

4. 打包与预览

shell
pnpm build

shell
pnpm preview

5. 单元测试（可选）

shell
pnpm test

测试报告生成：

shell
pnpm coverage

使用与配置要点

日常开发常用命令：

• 类型检查：pnpm typecheck
• 自动创建页面/组件：pnpm auto:create
• 自动移除：pnpm auto:remove
• 依赖更新：pnpm deps:fresh，之后需重新安装依赖：

shell

以上命令仅对包信息 package. 进行写入，需要重新执行包安装命令

pnpm i

• 代码规范校验：pnpm lint，校验时修复：pnpm lint:fix
• 安全初始化：pnpm safe:init

文件路由写法示例：src/pages/index.vue 对应 /，src/pages/users/[id].vue 对应 /users/:id，src/pages/[...notFound].vue 为 404 路由。布局方面 src/layouts/default.vue 为默认布局，创建 src/layouts/custom.vue 后可在页面 块中以 meta 指定。Mock 方面在根目录 mock 目录下导出 api 资源即可在 src 中模拟请求。

注意事项与常见问题

• 该模板仅支持 pnpm 包管理器，不能使用 npm/yarn。
• 依赖更新命令 pnpm deps:fresh 仅对 package. 进行写入，需要重新执行 pnpm i 安装。
• 众多主流插件的引入和繁杂配置已整合到根目录预设 presets 中，大多数情况下不需要重新配置；如需定制可在根目录 vite.config.ts 配置。
• Mock 拦截的是一整个接口，请求库可换用 axios 等。
• 如果有 SSG 场景，README 推荐使用受其启发的 vitesse 模板。

优缺点

• ✓ 开箱即用省配置时间
• ✓ 整合主流插件现代架构
• ✕ 仅支持 pnpm 包管理器

出处

本方案挖掘自开源项目 dishait/tov-template，方案内容与实施命令均来自其 README 原文。