# uniapp-vue-template

**Repository Path**: json_decode/uniapp-vue-vant-template

## Basic Information

- **Project Name**: uniapp-vue-template
- **Description**: uniapp vue3 vant 的模板仓库，开箱即用，调试中。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-16
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌟 UniApp Vue3 模板项目

## 📖 项目介绍

这是一个基于 UniApp + Vue3 + Pinia 的现代化跨平台项目模板，专注于提供优雅的开发体验和强大的功能支持。项目采用最新的技术栈，支持微信小程序、H5、App等多端开发，并内置了完善的权限控制和状态管理方案。

### ✨ 特性

- 🚀 基于 Vue3 + Vite，享受极速开发体验
- 📦 基于 Pinia 的状态管理，轻量且高效
- 🔐 完善的动态路由和权限控制
- 🌐 统一的网络请求封装
- 💫 多端兼容，一套代码多处运行
- 🔄 环境变量配置，轻松切换开发/测试/生产环境

## 🚀 快速开始

### 环境准备

```bash
# 确保安装了 Node.js (>= 14.x)
node -v

# 建议使用 pnpm 包管理器
npm install -g pnpm
```

### 安装依赖

```bash
# 安装项目依赖
pnpm install
```

### 运行项目

```bash
# H5开发
pnpm dev:h5

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

# App开发
pnpm dev:app
```

## 📁 项目结构

```
├── src/                # 源码目录
│   ├── api/           # API接口管理
│   │   ├── route.js   # 路由相关接口
│   │   └── user.js    # 用户相关接口
│   ├── pages/         # 页面文件
│   │   ├── 404/      # 404页面
│   │   ├── admin/    # 管理页面
│   │   ├── index/    # 首页
│   │   ├── login/    # 登录页
│   │   └── noauth/   # 无权限页面
│   ├── router/        # 路由配置
│   │   └── index.js  # 路由守卫
│   ├── store/         # 状态管理
│   │   ├── createStore.js # Store创建
│   │   ├── route.js  # 路由状态
│   │   └── user.js   # 用户状态
│   └── utils/         # 工具函数
│       ├── env.js    # 环境配置
│       └── request.js # 请求封装
└── vite.config.js     # Vite配置
```

## 🛠 技术栈

- 核心框架：Vue 3 + UniApp
- 构建工具：Vite 5.x
- 状态管理：Pinia
- 开发语言：JavaScript/TypeScript
- 国际化：Vue-i18n

## ⚙️ 路由配置

### 动态路由

项目采用后端动态下发路由配置，支持根据用户权限动态加载路由。

```javascript
// router/index.js 示例
export const setupRouterGuard = () => {
  // 路由守卫配置
  uni.addInterceptor('navigateTo', {
    invoke(e) {
      // 权限检查逻辑
      return checkPermission(e.url)
    }
  })
}
```

### 路由权限

- 支持路由白名单配置
- 基于角色的权限控制
- 动态路由缓存管理
- 优雅的未授权处理

## 🔧 环境配置

本项目使用 Vite 的环境变量系统来管理不同环境下的配置。详细说明请参考 `ENV-README.md` 文件。

### 环境文件

- `.env`：所有环境都会加载
- `.env.development`：开发环境配置
- `.env.test`：测试环境配置
- `.env.production`：生产环境配置

### 使用环境变量

```js
// 直接使用
console.log(import.meta.env.VITE_API_BASE_URL)

// 或使用配置文件（推荐）
import { getBaseUrl, isDev, isProd } from '@/utils/env'
console.log(getBaseUrl())
```

### 切换环境

```bash
# 开发环境
pnpm dev:h5:dev

# 测试环境
pnpm dev:h5:test

# 生产环境
pnpm dev:h5:prod

# 小程序开发环境
pnpm dev:mp-weixin:dev
```

## 📝 注意事项

### 开发工具

- 推荐使用 VS Code
- 必装插件：Volar (Vue 3)、ESLint、Prettier

### 编码规范

- 遵循 Vue 3 组合式 API 风格
- 保持统一的代码格式化配置

### 状态管理

- 按模块拆分 store
- 合理使用 pinia 的持久化
- 避免存储敏感信息

### 部署相关

- 区分环境配置
- 合理配置 CDN
- 注意小程序的特殊配置

## 📄 开源协议

[MIT](LICENSE) © 2024