Skip to content

woshidasg/uni-app-vue3

Repository files navigation

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

About

uni-app -vue3 开发脚手架基础模板功能封装

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy