uni-app-vue3 项目模板

项目概述

uni-app-vue3 是一个高效、规范、功能完备的 uni-app 开发脚手架，为快速开发跨平台应用提供了完整的解决方案。本模板集成了多语言国际化、状态管理、路由守卫、请求封装等企业级功能，并采用分包加载策略优化性能，同时内置代码规范工具保证代码质量。

技术栈

• 框架: Vue 3.x + uni-app
• 状态管理: Vuex 4.x
• 国际化: vue-i18n 9.x
• 代码规范: ESLint 8.x + Prettier 3.x
• UI组件: uni-ui
• 编译工具: Vite
• CSS预处理器: SCSS
• 请求库: 基于 uni.request 的封装
• 包管理: npm
• 环境: Node.js 18.20.1+

核心功能

1. 网络请求封装

• 基于 uni.request 的企业级封装
• 支持请求/响应拦截器
• Token 自动注入与管理
• 401 状态码自动重定向到登录页
• 提供 GET、POST、PUT、DELETE 等快捷方法
• 全局错误处理和友好提示

2. 状态管理

• 集成 Vuex 4.x，采用模块化设计
• 内置用户模块，实现登录状态和用户信息管理
• 数据持久化，自动保存到本地存储
• 支持多模块扩展，便于大型应用开发

3. 路由守卫

• 通过 uni.addInterceptor 实现全局导航拦截
• 可配置页面白名单，无需登录即可访问
• 灵活的权限控制系统
• 防重复登录和未授权访问控制

4. 分包加载

• 采用分包加载策略，将非核心功能拆分为独立分包
• 减小主包体积，提升小程序首次启动速度
• 优化性能表现，提高用户体验
• 支持分包预加载，进一步优化体验

5. 多语言国际化

• 集成 vue-i18n，支持中英文无缝切换
• 自动检测系统语言，提供最佳本地化体验
• 完整的多语言管理工具，包括语言切换、持久化等
• 支持动态更新 TabBar 文本等界面元素
• 全局注入 $t 方法，便于在任何组件中使用

6. 代码规范

• 内置 ESLint 和 Prettier 配置
• 统一代码风格，提高代码质量
• 支持自动格式化和语法检查
• 便于团队协作，减少代码冲突

项目结构

uni-app-yj/
├── api/                  # API 接口封装
│   ├── index.js          # API 接口入口
│   └── user.js           # 用户相关接口
├── common/               # 公共配置
│   └── config.js         # 全局配置文件
├── components/           # 公共组件
├── locale/               # 国际化配置
│   ├── en-US.js          # 英文语言包
│   ├── index.js          # 国际化入口
│   └── zh-CN.js          # 中文语言包
├── pages/                # 主包页面
│   ├── index/            # 首页
│   └── login/            # 登录页
├── static/               # 静态资源
├── store/                # Vuex 状态管理
│   ├── index.js          # Store 入口
│   └── modules/          # Store 模块
│       └── user.js       # 用户模块
├── sub-pages/            # 分包页面
│   └── my/               # 我的页面
├── uni_modules/          # uni-app 插件
├── utils/                # 工具函数
│   ├── auth.js           # 授权相关
│   ├── cache.js          # 缓存管理
│   ├── i18n-helper.js    # 国际化辅助
│   ├── permission.js     # 权限控制
│   ├── request.js        # 请求封装
│   ├── subpackage.js     # 分包加载
│   ├── tools.js          # 通用工具
│   └── validate.js       # 数据验证
├── App.vue               # 应用入口组件
├── main.js               # 应用入口文件
├── manifest.json         # 应用配置
├── pages.json            # 页面配置
└── uni.scss              # 全局样式变量

扩展功能

1. 缓存管理工具

• 支持分包资源缓存策略
• 过期时间控制，避免缓存过期问题
• 按分包清理缓存，优化存储空间

2. 自定义导航栏

• 登录页面实现了自定义导航栏
• 支持各种自定义样式和交互

3. 主题配置

• 支持明暗主题切换
• 可扩展的主题系统

4. 表单验证

• 集成表单验证功能
• 多语言错误提示

使用指南

环境要求

• Node.js: 18.20.1 或更高版本
• npm: 最新稳定版本

安装依赖

npm install

开发运行

npm run dev:h5        # H5 开发模式
npm run dev:mp-weixin # 微信小程序开发模式

代码规范检查

npm run lint         # 检查代码规范
npm run lint:fix     # 自动修复代码规范问题
npm run format       # 格式化代码

构建发布

npm run build:h5        # 构建 H5 版本
npm run build:mp-weixin # 构建微信小程序版本

最佳实践

1. API 接口管理：所有接口统一在 api 目录下管理，按模块划分
2. 状态管理：全局状态放在 Vuex 中，按模块划分，避免滥用
3. 路由守卫：需要登录的页面添加到 LOGIN_REQUIRED_PAGES 配置中
4. 多语言：所有文本使用 $t('key') 的方式引用，便于国际化
5. 分包加载：非核心页面放入分包中，减小主包体积

贡献与支持

欢迎提交 Issue 和 Pull Request，一起完善这个模板项目。

许可证

ISC License

uni-app-vue3