# vueXcxPro

**Repository Path**: code_tjf/vue-xcx-pro

## Basic Information

- **Project Name**: vueXcxPro
- **Description**: vue3的uniapp的小程序基础模版项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-11
- **Last Updated**: 2026-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp Vue3 小程序基础项目

一个基于 UniApp 和 Vue 3 的小程序基础项目，包含完整的工具类和常用库，可直接用于生产环境。

## 项目特点

- **现代化技术栈**：Vue 3 + Pinia + Vite
- **完整的工具类**：18个工具类覆盖所有常见功能
- **多平台支持**：支持微信、支付宝、百度小程序
- **生产级配置**：完善的项目结构和配置
- **性能优化**：ECharts 按需引入、图片懒加载等
- **安全性**：参数校验、接口签名、路由守卫

## 项目结构

```
vueXcxPro/
├── src/
│   ├── api/           # API 接口管理
│   │   ├── index.js   # API 入口
│   │   ├── user.js    # 用户相关 API
│   │   ├── product.js # 产品相关 API
│   │   └── order.js   # 订单相关 API
│   ├── assets/        # 静态资源
│   ├── components/    # 组件
│   ├── pages/         # 页面
│   ├── store/         # Pinia 状态管理
│   ├── utils/         # 工具类
│   │   ├── request.js      # 网络请求工具
│   │   ├── date.js         # 日期处理工具
│   │   ├── tool.js         # 通用工具函数
│   │   ├── navigate.js     # 页面跳转工具
│   │   ├── show.js         # 展示类工具
│   │   ├── preview.js      # 文件预览工具
│   │   ├── storage.js      # 存储工具
│   │   ├── device.js       # 设备工具
│   │   ├── validate.js     # 验证工具
│   │   ├── crypto.js       # 加密工具
│   │   ├── eventBus.js     # 事件总线
│   │   ├── cache.js        # 缓存工具
│   │   ├── image.js        # 图片处理工具
│   │   ├── i18n.js         # 国际化工具
│   │   ├── permission.js   # 权限工具
│   │   ├── calculator.js   # 计算工具
│   │   ├── report.js       # 报表工具
│   │   ├── echarts.js      # ECharts 工具
│   │   ├── imageOptimize.js # 图片优化工具
│   │   ├── routerGuard.js  # 路由守卫工具
│   │   └── index.js        # 工具类入口
│   ├── main.js        # 应用入口
│   ├── App.vue        # 根组件
│   ├── manifest.json  # UniApp 配置
│   └── pages.json     # 页面配置
├── .env              # 环境变量
├── .gitignore        # Git 忽略文件
├── package.json      # 项目依赖
├── vite.config.js    # Vite 配置
└── README.md         # 项目说明
```

## 核心功能

### 1. 网络请求
- 支持多域名配置
- 请求参数校验
- 接口签名验证
- 文件上传下载
- 全局异常收集

### 2. 状态管理
- 使用 Pinia 进行状态管理
- 支持状态持久化
- 模块化状态管理

### 3. 页面导航
- 封装页面跳转方法
- 支持参数传递
- 页面间通信通道
- 路由守卫和权限控制

### 4. 工具类
- **验证工具**：邮箱、手机号、身份证等验证
- **加密工具**：MD5、Base64、随机字符串
- **事件总线**：组件间通信
- **缓存工具**：内存缓存、自动过期
- **图片处理**：压缩、转换、预览
- **国际化**：多语言支持
- **权限管理**：权限检查和请求
- **计算工具**：金额、距离、统计
- **报表工具**：图表配置、数据导出
- **ECharts 工具**：图表库封装
- **图片优化**：懒加载、压缩、预加载

### 5. 性能优化
- ECharts 按需引入
- 图片懒加载
- 缓存策略
- 代码分割

### 6. 安全性
- 请求参数校验
- 接口签名验证
- 路由守卫
- 全局错误处理

## 环境配置

### 1. 环境变量
在 `.env` 文件中配置：

```env
# API 基础地址
VUE_APP_API_BASE_URL=https://api.example.com

# 备用 API 地址
VUE_APP_API_BASE_URL2=https://api2.example.com
VUE_APP_API_BASE_URL3=https://api3.example.com
```

### 2. 安装依赖

```bash
npm install
```

## 运行和构建

### 开发环境

```bash
# 微信小程序
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# 百度小程序
npm run dev:mp-baidu
```

### 生产环境

```bash
# 微信小程序
npm run build:mp-weixin

# 支付宝小程序
npm run build:mp-alipay

# 百度小程序
npm run build:mp-baidu
```

## 使用示例

### 1. API 调用

```javascript
import { login, getProductList } from '@/api'

// 登录
await login({
  username: 'admin',
  password: '123456'
})

// 获取产品列表
const products = await getProductList({
  page: 1,
  pageSize: 10
})
```

### 2. 工具类使用

```javascript
import { showToast, navigateTo, get, validatePhone } from '@/utils'

// 显示提示
showToast('操作成功')

// 页面跳转
navigateTo('/pages/detail/index', { id: 1 })

// 网络请求
const data = await get('/api/user/info')

// 验证手机号
if (validatePhone('13800138000')) {
  // 手机号有效
}
```

### 3. 状态管理

```javascript
import { useMainStore } from '@/store'

const store = useMainStore()

// 设置 token
store.setToken('your-token')

// 获取 userInfo
const userInfo = store.userInfo
```

### 4. 图表使用

```javascript
import { initECharts, updateECharts, EChartsOptions } from '@/utils'

// 初始化图表
const chart = initECharts('chartCanvas')

// 生成图表配置
const option = EChartsOptions.lineChart(
  ['1月', '2月', '3月'],
  [{ name: '销售额', data: [100, 200, 300] }]
)

// 更新图表
updateECharts(chart, option)
```

### 5. 路由守卫

```javascript
import { navigateTo } from '@/utils'

// 导航到需要登录的页面
navigateTo('/pages/user/index')

// 导航到需要权限的页面
navigateTo('/pages/admin/index')
```

### 6. 图片优化

```javascript
import { ImageLazyLoad, ImageCompress } from '@/utils'

// 初始化懒加载
const lazyLoad = new ImageLazyLoad()
lazyLoad.init()

// 添加图片到懒加载
const img = document.querySelector('img')
lazyLoad.addImage(img, 'https://example.com/image.jpg')

// 压缩图片
const compressed = await ImageCompress.compress('path/to/image.jpg', {
  quality: 80,
  maxWidth: 1080
})
```

## 扩展建议

1. **添加自定义组件**：根据业务需求创建通用组件
2. **扩展 API 模块**：添加更多业务相关的 API 接口
3. **集成第三方服务**：如支付、推送、地图等
4. **添加单元测试**：提高代码质量和可维护性
5. **实现 CI/CD**：自动化构建和部署

## 技术栈

- **框架**：Vue 3 + UniApp
- **状态管理**：Pinia
- **构建工具**：Vite
- **UI 组件**：uni-ui
- **图表库**：ECharts
- **工具库**：dayjs、lodash-es

## 许可证

MIT