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

项目简介

这是一个基于 Vite、Vue 3、TypeScript、Windi CSS 等现代前端技术的开发模板项目。它提供了开箱即用的现代开发环境，具备文件路由、布局系统、Mock 数据支持等实用功能。同时，支持 VueUse 插件、暗黑模式、SWR 请求处理、pinia 状态管理等，能有效提高开发效率，简化开发流程。

项目的主要特性和功能

1. 开发工具与框架：借助 Vite 快速搭建开发环境，运用 Vue 3 新特性进行开发。
2. 类型检查：集成 TypeScript 实现静态类型检查。
3. 路由与布局：采用文件即路由的方式简化配置，拥有灵活的布局系统。
4. 数据处理：支持创建和管理 Mock 数据，使用 SWR 处理数据请求。
5. 自动引入：可自动引入 API、组件、图标和插件。
6. 插件支持：提供 VueUse 插件，简化功能开发。
7. 样式管理：集成 Windi CSS 进行样式管理。
8. 状态管理：使用 pinia 进行状态管理。
9. 包管理：采用 pnpm 管理依赖。
10. 用户体验：支持暗黑模式切换，页面跳转时显示进度条，配备漂亮的 404 页面。
11. 调试与测试：支持 Inspect 调试和 Vitest 单元测试。
12. 内容渲染：支持渲染 Markdown 文件。
13. 代码优化：具备路径别名功能简化代码，支持 gzip 资源压缩以优化性能。
14. 命令行工具：提供命令行工具，便于创建和删除文件。
15. 国际化：支持多语言切换。
16. 代码规范：提供代码规范检查，保持代码风格一致。
17. 其他：支持使用 tsx 进行 React 组件开发，可通过环境变量进行配置管理。

安装使用步骤

1. 假设用户已下载本项目的源码文件。
2. 安装依赖：在项目的根目录下运行 pnpm install 命令安装依赖。
3. 运行项目：运行 pnpm dev 启动开发服务器，然后在浏览器中访问 http://localhost:3000 即可看到项目运行结果。如需构建生产环境，运行 pnpm build 命令构建项目，然后运行构建目录下的 index.html 文件即可。

下载地址

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