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

项目简介

本项目是一个基于Vite、Vue3和TypeScript的现代化开发模板，集成了众多实用功能与插件。使用该模板，开发者可节省项目配置时间，以更现代的方式开发Web应用，将更多精力投入业务逻辑实现。

项目的主要特性和功能

1. 构建与框架：采用Vite作为构建工具，具备快速构建与热更新能力；基于Vue3框架，支持组件化开发；使用TypeScript，提供强大的类型检查与推断功能。
2. 路由与布局：支持文件路由，通过目录结构自动生成路由；拥有布局系统，提供默认布局与自定义布局。
3. 模拟与请求：支持Mock功能，可模拟数据接口辅助开发；具备SWR请求支持，借助vue-request库简化请求操作；封装了全局通用的axios请求。
4. 自动引入：支持Api、组件、图标自动引入，减少手动引入代码量。
5. 其他特性：支持VueUse、暗黑模式、跳转进度条、开发面板、插件自动加载、单元测试、Markdown渲染、i18n国际化等；具备统一的代码规范与风格，生产环境自动移除开发日志；支持路径别名~、命令行自动创建与删除；集成echarts、全局通用toast通知；自动生成环境变量类型声明，自动更新依赖并生成CHANGELOG；提供最快最小的dockerfile静态go服务。

安装使用步骤

假设用户已下载本项目的源码文件，操作步骤如下： 1. 安装依赖：该模板仅支持pnpm包管理器，若未安装可参考安装教程。安装项目依赖，执行命令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 - 调试打包：pnpm build:debug 5. 单元测试 - 执行单元测试：pnpm test - 生成单元测试报告：pnpm coverage 6. 类型检查：执行pnpm typecheck进行类型检查。 7. 自动创建与移除 - 自动创建页面或组件：pnpm auto:create - 自动移除页面或组件：pnpm auto:remove 8. 依赖更新 - 更新依赖版本：pnpm deps:fresh - 重新执行包安装命令：pnpm i 9. 代码规范校验 - 仅校验：pnpm lint - 校验并修复：pnpm lint:fix

下载地址

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