【源码】基于 Vite 和 Vue3 的现代化前端开发模板

项目简介

本项目是基于 Vite、Vue3、TypeScript 和 Windi CSS 的现代化前端开发模板，集成了众多主流插件和工具，整合现代开发架构。目的是帮助开发者节省项目配置时间，提高开发效率，可用于快速构建和迭代各类 Web 应用。

项目的主要特性和功能

1. 构建与框架：采用 Vite 构建工具，基于 Vue3 和 TypeScript 开发，支持 ES6+语法和类型检查。
2. 路由与布局：支持文件路由，目录结构即路由；有布局系统，可设置默认和非默认布局。
3. Mock 与请求：提供 Mock 支持方便 API 模拟；支持 SWR 请求方式，用 vue-request 库简化请求处理。
4. 自动引入：实现 Api、组件、图标自动引入，支持流行组件库自动引入，按需引入节省开发时间。
5. 功能支持：支持 VueUse 强大的 Hooks 库、Windi CSS 原子 CSS 库、暗黑模式、i18n 国际化、Markdown 渲染、tsx 文件编写。
6. 状态管理：使用 pinia 进行状态管理，简单易用且对 TypeScript 支持良好。
7. 调试与测试：支持 Inspect 调试、Vitest 单元测试及报告生成。
8. 其他特性：有跳转进度条、插件自动加载、命令行自动创建与删除、gzip 资源压缩、环境变量配置等功能，还有漂亮的 404 页。

安装使用步骤

复制项目

可通过以下方式复制项目源码： - Gitee：git clone git@gitee.com:dishait/tov-template.git

环境要求

推荐使用 node 当前的长期维护版本 v16，且大于 v16.13.1。不限定特定的包管理器，npm、yarn 和 pnpm 均可，建议使用 pnpm，可参考 安装教程。

操作命令

以下命令使用 pnpm 示例，也可替换为对应的 npm 或 yarn 命令： 1. 安装依赖：pnpm install 2. 开发： - 启动开发服务器：pnpm dev - 开启 host：pnpm dev:host - 自动打开浏览器：pnpm dev:open 3. 预览： - 预览项目：pnpm preview - 开启 host：pnpm preview:host - 自动打开浏览器：pnpm preview:open 4. 打包：pnpm build 5. 单元测试： - 执行单元测试：pnpm test - 生成单元测试报告：pnpm coverage 6. 样式报告： - 预览样式报告：pnpm analysis - 打包样式报告：pnpm analysis:build 7. 类型检查：pnpm typecheck 8. 自动创建：pnpm auto:create 9. 自动移除：pnpm auto:remove 10. 依赖更新： - 安全版本更新：pnpm deps:fresh - 主版本更新（可能有破坏性更新，需谨慎）：pnpm deps:fresh:major - 次版本更新（可能有破坏性更新，需谨慎）：pnpm deps:fresh:minor - 补丁版本更新：pnpm deps:fresh:patch

更新依赖后需重新执行包安装命令，如 pnpm i。

下载地址

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