【源码】基于Vite 5和React框架的前端项目模板

项目简介

本项目是基于Vite 5和React框架的前端项目模板，借助现代前端技术栈构建。它集成了React、TypeScript、Unocss、Ant Design、Ahooks等多种工具和库，能为开发者带来快速开发、高效构建的用户界面体验，可轻松创建现代化、响应式的Web应用程序。

项目的主要特性和功能

1. 快速开发：采用Vite 5作为开发服务器，具备快速的模块热替换（HMR）和冷启动能力。
2. 技术栈全面：集成React、TypeScript、Unocss、Ant Design等前端技术与库，满足多样开发需求。
3. 国际化支持：集成i18n库，支持多语言应用。
4. 状态管理：使用Zustand管理组件状态，简洁灵活。
5. 数据请求处理：运用React Query库进行数据获取和缓存管理。
6. 本地模拟数据：集成MSW模拟后端API响应，方便开发时数据模拟。
7. 代码规范和校验：利用ESLint检查代码规范与错误，提升代码质量。
8. 暗黑模式和主题色切换：通过CSS变量调整全局样式，支持暗黑模式与主题色切换。

安装使用步骤

前提条件

假设用户已经下载了本项目的源码文件。

具体步骤

1. 安装项目依赖：在项目根目录下运行以下命令安装项目所需依赖。 bash pnpm install
2. 启动开发服务器：运行以下命令以启动开发服务器。 bash pnpm start 访问 http://localhost:3000 查看应用程序。
3. 构建生产版本：运行以下命令以构建生产版本。 bash pnpm build 构建后的文件将位于 dist 目录中。

容器化部署说明

1. 构建Docker镜像并运行容器：
2. 构建镜像：进入项目根目录，执行命令构建Docker镜像。请确保替换 your-image-name 为你自己的镜像名称。 bash docker build -t your-image-name .
3. 运行容器：使用以下命令在Docker容器中运行你的应用。这将把应用映射到你主机的端口 3000 上。 bash docker run -p 3000:80 your-image-name 现在可以通过访问 http://localhost:3000 来查看部署的应用。
4. 使用docker-compose.yaml文件启动Docker Compose服务：进入项目根目录，执行以下命令启动Docker Compose服务并查看部署的应用。容器运行成功后，可以通过访问 http://localhost:3000 来查看应用。 bash docker-compose up -d Docker Compose将根据docker-compose.yaml定义的配置构建镜像并在后台运行容器。

主题色切换和暗黑模式说明

本项目支持通过修改全局CSS变量来实现主题色切换和暗黑模式的切换功能。具体的实现方式可以参考项目中的相关文件和代码注释。

下载地址

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