159 lines
4.0 KiB
Markdown
159 lines
4.0 KiB
Markdown
# 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 配置
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
# H5 开发
|
||
npm run dev:h5
|
||
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
```
|
||
|
||
### 构建生产
|
||
|
||
```bash
|
||
# H5 构建
|
||
npm run build:h5
|
||
|
||
# 微信小程序构建
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
- ✅ Pinia 状态管理 + 持久化存储
|
||
- ✅ uview-plus 组件库集成
|
||
- ✅ dayjs 日期处理
|
||
- ✅ HTTP 请求封装（拦截器）
|
||
- ✅ 路由分包加载
|
||
- ✅ 图片懒加载组件
|
||
- ✅ 页面缓存策略
|
||
- ✅ 登录/注册功能模块
|
||
- ✅ 基础布局组件（头部、底部、侧边栏）
|
||
- ✅ 常用工具函数
|
||
|
||
## API 使用
|
||
|
||
```javascript
|
||
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 使用
|
||
|
||
```javascript
|
||
import { useUserStore } from '@/store/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// 设置用户信息
|
||
userStore.setUserInfo({ id: '1', username: 'admin' })
|
||
|
||
// 获取状态
|
||
const isLoggedIn = userStore.isLoggedIn
|
||
|
||
// 退出登录
|
||
userStore.logout()
|
||
```
|
||
|
||
## 页面缓存
|
||
|
||
```javascript
|
||
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
|