【源码】基于 Vite、Vue3 和 TypeScript 的现代 Web 开发模板

项目简介

这是一个融合 Vite、Vue3 和 TypeScript 的现代开发模板，可让开发者快速开启项目开发，无需花费大量时间进行项目配置，有效提升开发效率。该模板整合了众多主流插件，具备丰富功能特性，适用于各类 Web 应用的开发。

项目的主要特性和功能

1. 构建与框架：采用 Vite 构建工具，有快速热更新和冷启动能力；基于 Vue3 框架，拥有先进特性；支持 TypeScript 开发，提供强大类型检查。
2. 路由与布局：支持文件路由，以目录结构定义路由；有布局系统，含默认布局和自定义布局。
3. 模拟与请求：支持 Mock 接口，便于模拟后端数据；提供 SWR 请求支持，简化数据请求和缓存管理。
4. 自动引入：实现 Api、组件、图标自动引入，减少手动导入代码。
5. 状态管理：使用 pinia 进行状态管理，简单高效且对 TypeScript 支持良好。
6. 样式与主题：集成 UnoCss 原子 CSS 库，支持暗黑模式切换。
7. 功能扩展：支持 VueUse 实用 Hooks 库；支持 Markdown 渲染；有跳转进度条；提供开发面板辅助开发；支持插件自动加载。
8. 测试与规范：支持 Vitest 单元测试；使用 ESLint 和 Prettier 统一代码规范和风格。
9. 其他特性：支持 i18n 国际化；有漂亮的 404 页面；支持 tsx 开发；提供 gzip 资源压缩；支持环境变量配置和自动生成类型声明；可自动更新依赖和生成版本日志；有全局通用 toast 通知和 axios 请求封装；支持命令行自动创建与删除页面或组件。

安装使用步骤

假设你已经下载了本项目的源码文件，可按以下步骤操作：

1. 安装依赖

该模板仅支持 pnpm 包管理器，若未安装 pnpm，请先参考 安装教程 进行安装。安装完成后，在项目根目录下执行以下命令安装依赖： shell pnpm install

2. 开发

启动开发服务器： shell pnpm dev 若需要开启 host 或自动打开浏览器，可分别使用以下命令： shell pnpm dev:host pnpm dev:open

3. 预览

对打包后的项目进行预览： shell pnpm preview 同样支持开启 host 和自动打开浏览器： shell pnpm preview:host pnpm preview:open

4. 打包

执行以下命令进行项目打包： shell pnpm build 若需要调试打包，可使用： shell pnpm build:debug

5. 单元测试

运行单元测试： shell pnpm test

6. 单元测试报告生成

生成单元测试报告： shell pnpm coverage

7. 类型检查

检查代码类型： shell pnpm typecheck

8. 自动创建与移除

使用以下命令自动创建页面或组件： shell pnpm auto:create 使用以下命令自动移除页面或组件： shell pnpm auto:remove

9. 依赖更新

更新依赖版本： shell pnpm deps:fresh 上述命令仅对 package.json 进行写入，需要重新执行包安装命令： shell pnpm i

10. 代码规范校验

校验代码规范： shell pnpm lint 在校验时自动修复代码： shell pnpm lint:fix

下载地址

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