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+
- 基于
uni.request
的企业级封装 - 支持请求/响应拦截器
- Token 自动注入与管理
- 401 状态码自动重定向到登录页
- 提供 GET、POST、PUT、DELETE 等快捷方法
- 全局错误处理和友好提示
- 集成 Vuex 4.x,采用模块化设计
- 内置用户模块,实现登录状态和用户信息管理
- 数据持久化,自动保存到本地存储
- 支持多模块扩展,便于大型应用开发
- 通过
uni.addInterceptor
实现全局导航拦截 - 可配置页面白名单,无需登录即可访问
- 灵活的权限控制系统
- 防重复登录和未授权访问控制
- 采用分包加载策略,将非核心功能拆分为独立分包
- 减小主包体积,提升小程序首次启动速度
- 优化性能表现,提高用户体验
- 支持分包预加载,进一步优化体验
- 集成 vue-i18n,支持中英文无缝切换
- 自动检测系统语言,提供最佳本地化体验
- 完整的多语言管理工具,包括语言切换、持久化等
- 支持动态更新 TabBar 文本等界面元素
- 全局注入 $t 方法,便于在任何组件中使用
- 内置 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 # 全局样式变量
- 支持分包资源缓存策略
- 过期时间控制,避免缓存过期问题
- 按分包清理缓存,优化存储空间
- 登录页面实现了自定义导航栏
- 支持各种自定义样式和交互
- 支持明暗主题切换
- 可扩展的主题系统
- 集成表单验证功能
- 多语言错误提示
- 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 # 构建微信小程序版本
- API 接口管理:所有接口统一在
api
目录下管理,按模块划分 - 状态管理:全局状态放在 Vuex 中,按模块划分,避免滥用
- 路由守卫:需要登录的页面添加到
LOGIN_REQUIRED_PAGES
配置中 - 多语言:所有文本使用
$t('key')
的方式引用,便于国际化 - 分包加载:非核心页面放入分包中,减小主包体积
欢迎提交 Issue 和 Pull Request,一起完善这个模板项目。
ISC License