【源码】基于Vite+Vue3+TypeScript的Web开发模板

项目简介

本项目是一个基于Vite、Vue3和TypeScript的开箱即用现代开发模板。集成众多实用功能和主流插件，能帮助开发者节省项目配置时间，以更高效、现代的方式开发Web应用。

项目的主要特性和功能

1. 构建与框架：采用Vite作为构建工具，结合Vue3响应式框架，带来高效开发体验。
2. 路由与布局：支持文件路由和布局系统，可根据目录结构自动生成路由，灵活配置页面布局。
3. Mock与请求：具备Mock支持，方便模拟接口数据；支持SWR请求方式，自动处理数据、状态和缓存。
4. 自动引入：实现Api、组件、图标自动引入，减少手动导入代码，提升开发效率。
5. 工具支持：支持VueUse、TypeScript、Windi CSS、pinia状态管理、Vitest单元测试等，提高开发便捷性和代码质量。
6. 其他特性：包含暗黑模式、跳转进度条、Inspect调试、插件自动加载、Markdown渲染、路径别名、命令行自动创建与删除、i18n国际化、漂亮的404页、tsx支持和gzip资源压缩等功能。

安装使用步骤

前提条件

推荐使用Node的长期维护版本v16（大于v16.13.1），不限定包管理器，npm、yarn和pnpm均可，建议使用pnpm。

复制模板

可通过以下方式复制模板： - Gitee：git clone git@gitee.com:dishait/tov-template.git

安装依赖

shell pnpm install

开发

```shell pnpm dev

pnpm dev:host

pnpm dev:open ```

预览

```shell pnpm preview

pnpm preview:host

pnpm preview:open ```

打包

shell pnpm build

单元测试

shell pnpm test

单元测试报告生成

shell pnpm coverage

样式报告预览

shell pnpm analysis

样式报告打包

shell pnpm analysis:build

类型检查

shell pnpm typecheck

自动创建

shell pnpm auto:create

自动移除

shell pnpm auto:remove

License

本项目遵循MIT License。

下载地址

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