# uni-preset-vue 项目模板

**Repository Path**: luo-deng6/uni-App-vue

## Basic Information

- **Project Name**: uni-preset-vue 项目模板
- **Description**: 由于在使用 vue init dcloudio/uni-preset-vue vlog 命令时遇到网络连接问题，无法从 GitHub 下载模板，所以选择手动下载并设置 uni-preset-vue 项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-03
- **Last Updated**: 2025-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app 项目模板

这是一个基于 uni-app 框架的项目模板，使用 Vue.js 开发，可以编译到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）等多个平台。

## 项目特点

- 🚀 基于 Vue.js 开发
- 📱 一套代码，多端运行
- 🛠 使用 HBuilderX 开发工具
- 📦 使用 pnpm 包管理器
- 🎨 支持 SCSS 预处理器
- 📝 支持 TypeScript

## 开发环境准备

1. 安装 HBuilderX
   - 下载地址：[HBuilderX 官方下载](https://www.dcloud.io/hbuilderx.html)
   - 建议下载 App 开发版，内置了相关开发工具

2. 安装 Node.js
   - 建议使用 LTS 版本：[Node.js 下载](https://nodejs.org/)
   - 推荐使用 nvm 管理 Node.js 版本

3. 安装 pnpm
   ```bash
   npm install -g pnpm
   ```

## 项目运行

1. 安装依赖
   ```bash
   pnpm install
   ```

2. 运行到浏览器
   ```bash
   pnpm dev:h5
   ```

3. 运行到小程序
   ```bash
   pnpm dev:mp-weixin  # 微信小程序
   pnpm dev:mp-alipay  # 支付宝小程序
   pnpm dev:mp-baidu   # 百度小程序
   ```

4. 运行到 App
   - 使用 HBuilderX 打开项目
   - 点击运行 -> 运行到手机或模拟器

## 项目结构

```
├── src                     # 源代码目录
│   ├── pages              # 页面文件夹
│   ├── static             # 静态资源
│   ├── App.vue            # 应用配置
│   ├── main.js            # 入口文件
│   ├── manifest.json      # 应用配置
│   ├── pages.json         # 页面配置
│   └── uni.scss           # 全局样式变量
├── package.json           # 项目配置
└── README.md             # 项目说明
```

## 学习资源

### 官方文档
- [uni-app 官方文档](https://uniapp.dcloud.net.cn/)
- [uni-app 组件文档](https://uniapp.dcloud.net.cn/component/)
- [uni-app API 文档](https://uniapp.dcloud.net.cn/api/)
- [uni-app 条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html)

### 视频教程
- [uni-app 官方教程](https://ke.qq.com/course/3169971)
- [uni-app 实战教程](https://www.bilibili.com/video/BV1BJ411W7uM)

### 社区资源
- [uni-app 插件市场](https://ext.dcloud.net.cn/)
- [uni-app 示例项目](https://github.com/dcloudio/uni-app/tree/master/examples)
- [uni-app 社区](https://ask.dcloud.net.cn/)

## 开发规范

1. 目录命名规范
   - 文件夹：小写字母，多个单词用中划线连接（例：user-profile）
   - 组件文件：大驼峰命名（例：UserProfile.vue）
   - 页面文件：小写字母，多个单词用中划线连接（例：user-profile.vue）

2. 代码规范
   - 使用 ESLint 进行代码检查
   - 使用 Prettier 进行代码格式化
   - 遵循 Vue.js 风格指南

3. 组件开发规范
   - 组件名使用大驼峰命名
   - 组件文件放在 components 目录下
   - 组件属性使用小驼峰命名
   - 组件事件使用 kebab-case 命名

## 常见问题

1. 跨端兼容
   - 使用条件编译处理平台差异
   - 使用 uni-app 提供的跨端组件
   - 注意各平台 API 的兼容性

2. 性能优化
   - 合理使用分包加载
   - 图片资源压缩
   - 避免不必要的数据监听
   - 使用 v-show 替代 v-if（频繁切换时）

3. 调试技巧
   - 使用 console 调试
   - 使用 Vue Devtools
   - 使用 HBuilderX 内置调试工具

## 发布部署

1. 小程序发布
   - 在 HBuilderX 中点击发行
   - 选择对应的小程序平台
   - 按照提示上传代码

2. H5 发布
   - 执行 `pnpm build:h5`
   - 将 dist/build/h5 目录下的文件部署到服务器

3. App 发布
   - 在 HBuilderX 中点击发行
   - 选择原生 App-云打包
   - 配置证书和版本信息
   - 等待云端打包完成

## 贡献指南

1. Fork 本仓库
2. 创建新的分支
3. 提交代码
4. 创建 Pull Request

## 许可证

MIT License