%20(2).svg)
项目简介
本项目是基于 Vite、Vue3 和 TypeScript 的现代开发模板，集成了众多主流插件与工具，形成现代化的前端开发架构。使用该模板可节省项目配置时间，大幅提高开发效率，适合不想在项目配置上浪费时间，且希望以更现代的方式开发 Web 应用的开发者。
项目的主要特性和功能
- 构建与框架：采用 Vite 作为构建工具，使用 Vue3 框架，支持用 TypeScript 直接编写代码。
- 路由与布局：支持文件路由，目录结构即路由；具备布局系统，可设置默认布局与自定义布局。
- Mock 与请求：支持 Mock 数据，便于开发测试；采用 SWR 请求方式，使用 vue - request 库简化请求处理。
- 自动引入：支持 Api、组件、图标自动引入，提升开发效率。
- 状态管理：使用 pinia 进行状态管理，简单易用且对 TypeScript 支持良好。
- 样式与主题：使用 unocss 原子 CSS 库，支持暗黑模式切换。
- 开发辅助：有跳转进度条、开发面板，支持插件自动加载。
- 测试与规范：支持 Vitest 单元测试，具备统一的代码规范与风格。
- 其他功能：支持 Markdown 渲染、i18n 国际化、tsx、gzip 资源压缩、环境变量配置、自动生成环境变量类型声明、renovate 自动更新依赖、自动版本更新并生成 CHANGELOG、最快最小的 dockerfile 静态 go 服务等。
安装使用步骤
假设用户已下载本项目的源码文件，以下是使用步骤：
1. 环境要求
推荐使用 Node.js 当前的长期维护版本 v18，且该模板仅支持 pnpm 包管理器，若未安装 pnpm，可参考 安装教程 进行安装。
2. 安装依赖
在项目根目录下执行以下命令安装依赖：
shell
pnpm install
3. 开发
启动开发服务器：
shell
pnpm dev
若需要开启 host：
shell
pnpm dev:host
若需要自动打开浏览器：
shell
pnpm dev:open
4. 预览
预览打包后的项目：
shell
pnpm preview
若需要开启 host：
shell
pnpm preview:host
若需要自动打开浏览器：
shell
pnpm preview:open
5. 打包
执行以下命令进行项目打包：
shell
pnpm build
若需要调试打包：
shell
pnpm build:debug
6. 单元测试
运行单元测试：
shell
pnpm test
生成单元测试报告：
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】