# uni-vue3-vite

**Repository Path**: han1982/uni-vue3-vite

## Basic Information

- **Project Name**: uni-vue3-vite
- **Description**: 基于Vue 3和Vite构建的现代化前端项目模板，适用于快速搭建微信小程序应用，采用uni-cli创建，vite5+vue3+uview2。（2025年12月8日创建，uni-app 项目的编译器依赖版本3.0.0-4080520251106001）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-08
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 📋 项目介绍

### **uni-vue3-vite** - 现代化多端应用开发模板

**基于 Vue 3 + Vite 5 + TypeScript 构建的全平台前端开发解决方案**

------

## 🚀 核心特性

### **现代化技术栈**

- **Vue 3.3** - 响应式系统与组合式API
- **Vite 5.2** - 极速构建与热重载
- **TypeScript 5.1** - 完整的类型安全支持
- **Uni-App 3.0** - 一套代码，多端运行

### **UI框架支持**

```
# 默认集成了 uni-ui（官方UI库）
# 同时完美兼容 uView 2.x（需手动安装）
```



### **多端适配能力**

- ✅ **H5端** - 完整的Web应用体验，支持SSR

- ✅ **微信小程序** - 原生级别的体验

- ✅ **支付宝小程序** - 支付宝生态接入

- ✅ **字节跳动小程序** - 抖音/头条生态

- ✅ **QQ小程序** - QQ生态应用

- ✅ **App端** - iOS/Android原生应用

- ✅ **快应用** - 各厂商快应用平台

- ✅ **Harmony鸿蒙** - 鸿蒙原生应用


------

## 🏗️ 架构设计

### **分层架构**

```
src/
├── api/           # 接口层（统一请求管理）
├── components/    # 业务组件
├── composables/   # Vue组合式函数
├── pages/         # 页面组件（符合uni-app规范）
├── static/        # 静态资源
├── stores/        # Pinia状态管理
├── styles/        # 全局样式
├── types/         # TypeScript类型定义
├── utils/         # 工具函数库
└── main.ts        # 应用入口
```



### **核心配置**

- **Vite配置** (`vite.config.ts`) - 构建优化与插件集成
- **Uni-App配置** (`manifest.json`) - 多端配置文件
- **TypeScript配置** (`tsconfig.json`) - 类型检查与编译选项
- **ESLint + Prettier** - 代码规范与格式化



### **版本兼容性**

##### ⭐ **最佳兼容组合**

```
Vue 3.3.0 + Vite 5.2.8 + TypeScript 5.1.6 + UniApp 3.x
```

##### 🔍 **关键依赖版本说明**

**核心框架版本统一性**：

```
所有 @dcloudio/* 包版本号：3.0.0-4080520251106001
```

这是 **uni-app 3.0.0-alpha** 的特定版本号，表示这是一个**开发测试版本**（日期编码：2025年11月6日）

**Vue3生态版本**：

- `vue`: ^3.3.0 (兼容3.3.0-3.4.x)
- `@vue/runtime-core`: 3.5.25 (锁定版本，确保兼容性)
- `pinia`: 2.1.7 (稳定版本)

**TypeScript配置**：

- `@vue/tsconfig`: ^0.5.1
- `vue-tsc`: ^1.8.8
- 类型支持：`@uni-helper/uni-types` + 各平台类型包



### **版本兼容性矩阵**

| 组件            | 推荐版本       | 兼容范围       | 说明                      |
| :-------------- | :------------- | :------------- | :------------------------ |
| **Vue**         | 3.3.0 - 3.5.11 | 3.2.0+         | 避免 3.2.x 以下的版本     |
| **Pinia**       | 2.1.7          | 2.0.0 - 2.2.0+ | 2.1.x 最稳定              |
| **Pinia持久化** | 3.2.1          | 3.0.0+         | 专为 Pinia 2.x 设计       |
| **Vite**        | 5.2.8          | 4.0.0+         | 5.x 对 Vue 3 支持最好     |
| **TypeScript**  | 5.1.6          | 5.0.0+         | 5.x 有更好的 Vue 类型推断 |

### **兼容性总结**

| 项目       | 兼容性评级 | 说明               |
| :--------- | :--------- | :----------------- |
| Vue3生态   | ⭐⭐⭐⭐⭐      | 版本搭配合理       |
| UniApp核心 | ⭐⭐⭐⭐       | alpha版本需注意    |
| TypeScript | ⭐⭐⭐⭐⭐      | 5.1.6稳定支持      |
| 构建工具   | ⭐⭐⭐⭐⭐      | Vite 5.x最新稳定版 |
| 多端支持   | ⭐⭐⭐⭐⭐      | 全平台覆盖         |

------

## 🛠️ 开发体验

### **快速启动**

```
# 安装依赖
npm install

# 开发微信小程序
npm run dev:mp-weixin

# 开发H5
npm run dev:h5

# 开发App
npm run dev:app
```



### **开发工具链**

- **自动导入API** - 无需手动导入常用API
- **组件自动引入** - 智能识别组件依赖
- **类型安全** - 完整的Vue3 + UniApp类型支持
- **热重载** - 毫秒级更新，开发效率倍增

### **代码质量**

- **Git Hooks** - 提交前自动格式化与检查
- **ESLint配置** - Vue3推荐规范
- **Prettier集成** - 统一的代码风格
- **TypeScript严格模式** - 编译时错误检查

------

## 🌟 适用场景

### **企业级应用**

- **移动电商平台** - 小程序、App、H5全渠道覆盖
- **智慧办公应用** - 企业移动办公与协同工具
- **在线教育平台** - 移动端学习与课程管理系统
- **医疗健康服务** - 移动医疗、健康管理应用
- **智慧出行服务** - 交通出行、位置服务应用

### **创业项目**

- **MVP快速验证** - 一套代码快速验证产品形态
- **多平台同步上线** - 同时覆盖微信、支付宝、抖音等生态
- **低成本多端覆盖** - 显著降低多端开发成本
- **快速迭代开发** - 基于现代化工具链的快速开发体验

### **个人开发者**

- **移动端技术学习** - 学习Vue3+TypeScript+跨端开发

- **个人作品展示** - 多端部署展示个人技术能力

- **开源移动应用** - 开发支持多端的开源项目

- **跨平台应用实验** - 一次开发，多端运行的创新尝试

### **选择本框架的理由**

- **移动端优先** - 专门为移动端开发优化的技术栈
- **生态覆盖全** - 覆盖主流移动应用分发渠道
- **开发效率高** - 现代化工具链提升移动端开发效率
- **维护成本低** - 一套代码维护多个移动端平台
- **用户体验一致** - 在不同移动端保持一致的交互体验

------

## 📚 学习资源

### **官方文档**

- [Vue 3 官方文档](https://vuejs.org/)
- [Vite 官方文档](https://vitejs.dev/)
- [Uni-App 官方文档](https://uniapp.dcloud.net.cn/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)

### **社区资源**

- GitHub仓库模板
- 示例项目代码
- 常见问题解答
- 最佳实践指南

------

## 🆕 版本更新

### **近期更新**

- ✅ 升级到 Vue 3.3 + Vite 5.x
- ✅ 集成 TypeScript 5.x 最新特性
- ✅ 支持鸿蒙 Harmony 原生应用
- ✅ 优化多端构建性能

### **路线图**

- 🔄 支持 Vue 3.4 新特性
- 🔄 集成微前端架构
- 🔄 增强 TypeScript 类型支持
- 🔄 更多原生插件支持

------

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个模板！

### **贡献方式**

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

------

## 📄 许可证

本项目基于 MIT 许可证开源 - 查看 [LICENSE](https://license/) 文件了解详情。

------

## 📞 支持与联系

如有问题或建议，请通过以下方式联系：

- **作者**: 散修云客
- **GitHub**: https://gitee.com/han1982/
- **Issues**: 在 GitHub 仓库提交 Issue
- **讨论区**: 加入社区讨论

------

**开始你的多端开发之旅吧！🚀**