uniapp-vue3-template

基于 Vue3 + Vite + Pinia + uview-plus 的 UniApp 项目模板

技术栈

• 核心框架: Vue3 + Vite
• 状态管理: Pinia（配置持久化存储）
• UI组件库: uview-plus
• 日期处理: dayjs
• 多端支持: H5、微信小程序

项目结构

uniapp-vue3-template/
├── api/                    # API 接口层
│   ├── modules/           # 业务接口模块
│   │   ├── auth.js        # 登录注册接口
│   │   └── user.js        # 用户相关接口
│   ├── request.js         # HTTP 请求封装
│   └── index.js           # 接口统一导出
├── components/            # 组件目录
│   ├── common/           # 公共组件
│   │   ├── lazy-image.vue # 图片懒加载
│   │   ├── empty-state.vue # 空状态组件
│   │   └── page-container.vue # 页面容器
│   └── layout/           # 布局组件
│       ├── layout-header.vue  # 头部导航
│       ├── layout-footer.vue  # 底部标签栏
│       └── layout-sidebar.vue # 侧边栏
├── pages/                 # 主包页面
│   ├── index/            # 首页
│   ├── login/            # 登录页
│   ├── register/         # 注册页
│   ├── user/             # 个人中心
│   └── demo/             # 组件演示
├── store/                 # Pinia 状态管理
│   ├── user.js           # 用户状态
│   ├── app.js            # 应用状态
│   └── index.js          # 状态管理入口
├── styles/                # 样式文件
│   ├── uni.scss          # 全局样式
│   └── variable.scss     # SCSS 变量
├── subpkg/                # 分包目录
│   ├── goods/            # 商品模块
│   └── order/            # 订单模块
├── utils/                 # 工具函数
│   ├── storage.js        # 本地存储
│   ├── validate.js       # 表单验证
│   ├── format.js         # 格式化工具
│   └── index.js          # 工具导出
├── App.vue               # 应用入口
├── main.js               # 应用配置
├── manifest.json         # 应用配置文件
├── pages.json            # 页面配置
├── package.json          # 项目依赖
└── vite.config.js        # Vite 配置

快速开始

安装依赖

npm install

开发模式

# H5 开发
npm run dev:h5

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

构建生产

# H5 构建
npm run build:h5

# 微信小程序构建
npm run build:mp-weixin

功能特性

• ✅ Pinia 状态管理 + 持久化存储
• ✅ uview-plus 组件库集成
• ✅ dayjs 日期处理
• ✅ HTTP 请求封装（拦截器）
• ✅ 路由分包加载
• ✅ 图片懒加载组件
• ✅ 页面缓存策略
• ✅ 登录/注册功能模块
• ✅ 基础布局组件（头部、底部、侧边栏）
• ✅ 常用工具函数

API 使用

import { get, post } from '@/api'
import { login, register } from '@/api/modules/auth'

// GET 请求
const list = await get('/user/list', { page: 1, pageSize: 10 })

// POST 请求
const res = await login({ username: 'admin', password: '123456' })

Store 使用

import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 设置用户信息
userStore.setUserInfo({ id: '1', username: 'admin' })

// 获取状态
const isLoggedIn = userStore.isLoggedIn

// 退出登录
userStore.logout()

页面缓存

import { useAppStore } from '@/store/app'

const appStore = useAppStore()

// 添加页面缓存
appStore.addCachePage('user-profile')

// 移除页面缓存
appStore.removeCachePage('user-profile')

// 清空缓存
appStore.clearCache()

注意事项

1. 首次运行需要安装依赖
2. 开发 H5 时访问 http://localhost:3000
3. 微信小程序需要配置 AppID
4. 记得修改 API 请求的 BASE_URL

License

MIT