【源码】基于 vite + vue3 + ts 的现代开发模板

项目简介

此项目是一个基于 vite、vue3 和 TypeScript 的现代开发模板，旨在帮助开发者节省项目配置时间，结合主流插件构建现代开发架构，从而提升开发效率。该模板提供了一套开箱即用的开发环境，涵盖众多实用功能，可满足多种 web 应用开发场景的需求。

项目的主要特性和功能

1. 构建与框架：采用 Vite 作为构建工具，使用 Vue3 前端框架，支持 TypeScript 静态类型语言。
2. 路由与布局：具备文件路由系统，目录结构即路由；拥有布局系统，可设置默认和自定义布局。
3. 模拟数据：支持 Mock 数据，方便在开发阶段进行接口测试。
4. 自动引入：实现 Api、组件、图标自动引入，减少手动引入的繁琐。
5. 实用工具：集成 VueUse 强大的 hooks 库；采用 Windi CSS 原子 CSS 库，支持暗黑模式。
6. 请求管理：支持 SWR 请求方式，使用 pinia 进行状态管理。
7. 包管理：推荐使用 pnpm 包管理器，具有更快、更节省空间等优点。
8. 用户体验：具备跳转进度条，提供漂亮的 404 页面。
9. 调试与测试：支持 Inspect 调试工具、Vitest 单元测试。
10. 其他功能：支持 Markdown 渲染、路径别名 ~、命令行自动创建与删除、i18n 国际化、tsx、gzip 资源压缩、环境变量配置，同时提供统一的代码规范与风格。

安装使用步骤

前提条件

推荐使用 node 当前的长期维护版本 v16（大于 v16.13.1），该模板不限定特定的包管理器，npm、yarn 和 pnpm 均可，同时 npm 版本应尽量新，强烈推荐使用 pnpm（安装教程）。

操作步骤

1. 复制模板
   • Gitee：git clone git@gitee.com:dishait/tov-template.git
2. 安装依赖
   • pnpm install
   • 或 npm install
   • 或 yarn
3. 开发
   • 常规开发：pnpm dev 或 npm run dev 或 yarn dev
   • 开启 host：pnpm dev:host 或 npm run dev:host 或 yarn dev:host
   • 自动打开浏览器：pnpm dev:open 或 npm run dev:open 或 yarn dev:open
4. 预览
   • 常规预览：pnpm preview 或 npm run preview 或 yarn preview
   • 开启 host：pnpm preview:host 或 npm run preview:host 或 yarn preview:host
   • 自动打开浏览器：pnpm preview:open 或 npm run preview:open 或 yarn preview:open
5. 打包：pnpm build 或 npm run build 或 yarn build
6. 单元测试：pnpm test 或 npm run test 或 yarn test
7. 单元测试报告生成：pnpm coverage 或 npm run coverage 或 yarn coverage
8. 样式报告预览：pnpm analysis 或 npm run analysis 或 yarn analysis
9. 样式报告打包：pnpm analysis:build 或 npm run analysis:build 或 yarn analysis:build
10. 类型检查：pnpm typecheck 或 npm run typecheck 或 yarn typecheck
11. 自动创建：pnpm auto:create 或 npm run auto:create 或 yarn auto:create
12. 自动移除：pnpm auto:remove 或 npm run auto:remove 或 yarn auto:remove
13. 依赖更新
    • 安全版本更新：pnpm deps:fresh 或 npm run deps:fresh 或 yarn deps:fresh
    • 主版本更新（可能有破坏性，谨慎使用）：pnpm deps:fresh:major 或 npm run deps:fresh:major 或 yarn deps:fresh:major
    • 次版本更新（可能有破坏性，谨慎使用）：pnpm deps:fresh:minor 或 npm run deps:fresh:minor 或 yarn deps:fresh:minor
    • 补丁版本更新：pnpm deps:fresh:patch 或 npm run deps:fresh:patch 或 yarn deps:fresh:patch 执行以上命令后，需重新执行包安装命令，如 pnpm i 或 npm i 或 yarn
14. 代码规范校验
    • 常规校验：pnpm lint 或 npm run lint 或 yarn lint
    • 校验时修复：pnpm lint:fix 或 npm run lint:fix 或 yarn lint:fix

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】