UniApp 模板
基于 UniApp + Vue 3 + TypeScript 的跨平台应用开发模板，支持 H5、小程序、App 等多端开发。
技术栈
- UniApp - 跨平台应用开发框架
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集，提供类型安全
- Vite - 下一代前端构建工具
- Tailwind CSS - 实用优先的 CSS 框架
- vue-i18n - Vue.js 国际化插件
快速开始
创建项目
bash
# 初始化项目
vup init my-project
# 进入项目目录
cd my-project
# 添加 UniApp 应用
vup add my-app
# 选择 UniApp 模板开发
bash
# 安装依赖
pnpm install
# H5 开发
pnpm dev
# 微信小程序开发
pnpm dev:mp-weixin
# 支付宝小程序开发
pnpm dev:mp-alipay
# App 开发
pnpm dev:app构建
bash
# H5 构建
pnpm build
# 微信小程序构建
pnpm build:mp-weixin
# 支付宝小程序构建
pnpm build:mp-alipay
# App 构建
pnpm build:app项目结构
my-app/
├── src/
│ ├── pages/ # 页面目录
│ │ └── index/ # 首页
│ │ └── index.vue # 首页组件
│ ├── static/ # 静态资源
│ │ └── logo.png # 应用图标
│ ├── locales/ # 多语言文件
│ │ ├── index.ts # i18n 配置
│ │ ├── zh-CN.ts # 中文语言包
│ │ └── en-US.ts # 英文语言包
│ ├── App.vue # 应用根组件
│ ├── main.ts # 应用入口
│ ├── manifest.json # 应用配置
│ ├── pages.json # 页面配置
│ └── uni.scss # 全局样式
├── index.html # H5 入口文件
├── package.json # 依赖配置
├── vite.config.ts # Vite 配置
├── tailwind.config.js # Tailwind 配置
└── tsconfig.json # TypeScript 配置核心特性
🎯 TypeScript 支持
完整的 TypeScript 支持，提供类型安全和智能提示：
typescript
// 页面组件中使用 TypeScript
<script setup lang="ts">
interface User {
id: number;
name: string;
email: string;
}
const user = ref<User>({
id: 1,
name: 'John Doe',
email: 'john@example.com'
});
</script>📱 跨平台开发
一套代码，多端运行：
- H5 - 现代浏览器和移动端浏览器
- 小程序 - 微信、支付宝、百度、字节跳动、QQ 等
- App - iOS 和 Android 原生应用
🎨 响应式设计
基于 Tailwind CSS 的现代化 UI：
vue
<template>
<view class="container mx-auto px-4 py-8">
<text class="text-3xl font-bold text-blue-600">
{{ title }}
</text>
</view>
</template>
<style lang="scss" scoped>
.container {
@apply bg-white rounded-lg shadow-md;
}
</style>🌍 多语言支持
内置完整的多语言支持：
vue
<template>
<view>
<text>{{ t('common.hello') }}</text>
</view>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
</script>🛣️ 页面路由
基于文件系统的页面路由：
json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/profile/profile",
"style": {
"navigationBarTitleText": "个人中心"
}
}
]
}📦 组件系统
丰富的内置组件和自定义组件：
vue
<template>
<view class="page">
<button @click="handleClick" class="btn-primary">点击我</button>
<image src="/static/logo.png" mode="aspectFit" />
<text class="text-lg">{{ message }}</text>
</view>
</template>开发工具
代码质量
- ESLint - 代码质量检查
- Prettier - 代码格式化
- TypeScript - 类型检查
开发命令
bash
# 开发服务器
pnpm dev # H5 开发
pnpm dev:mp-weixin # 微信小程序开发
pnpm dev:mp-alipay # 支付宝小程序开发
pnpm dev:mp-baidu # 百度小程序开发
pnpm dev:mp-toutiao # 字节跳动小程序开发
pnpm dev:mp-qq # QQ 小程序开发
pnpm dev:app # App 开发
# 构建
pnpm build # H5 构建
pnpm build:mp-weixin # 微信小程序构建
pnpm build:mp-alipay # 支付宝小程序构建
pnpm build:app # App 构建
# 代码质量
pnpm lint # 代码检查
pnpm lint:fix # 自动修复问题
pnpm format # 代码格式化
pnpm type-check # 类型检查热重载
UniApp 提供极速的热重载体验：
- 修改 Vue 文件时自动刷新
- 修改样式文件时热更新
- 保持应用状态
平台特定功能
条件编译
使用条件编译处理平台差异：
vue
<template>
<view>
<!-- #ifdef H5 -->
<div class="h5-specific">H5 特定内容</div>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="weixin-specific">微信小程序特定内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="app-specific">App 特定内容</view>
<!-- #endif -->
</view>
</template>
<script setup lang="ts">
// #ifdef H5
const h5SpecificFunction = () => {
console.log('H5 特定功能');
};
// #endif
// #ifdef MP-WEIXIN
const weixinSpecificFunction = () => {
console.log('微信小程序特定功能');
};
// #endif
</script>平台 API
使用 UniApp 统一的 API：
typescript
// 网络请求
uni.request({
url: 'https://api.example.com/data',
method: 'GET',
success: (res) => {
console.log(res.data);
},
});
// 本地存储
uni.setStorageSync('key', 'value');
const value = uni.getStorageSync('key');
// 页面跳转
uni.navigateTo({
url: '/pages/detail/detail?id=123',
});
// 显示提示
uni.showToast({
title: '操作成功',
icon: 'success',
});状态管理
简单状态管理
使用 Vue 3 的响应式 API：
typescript
// 使用 ref
const count = ref(0);
const increment = () => count.value++;
// 使用 reactive
const state = reactive({
user: null,
loading: false,
});复杂状态管理
使用 Pinia 进行状态管理：
typescript
// stores/user.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', () => {
const user = ref(null);
const isLoggedIn = computed(() => !!user.value);
const login = async (credentials) => {
// 登录逻辑
};
return { user, isLoggedIn, login };
});样式开发
Tailwind CSS 使用
vue
<template>
<view
class="flex flex-col items-center justify-center min-h-screen bg-gray-50"
>
<text class="text-4xl font-bold text-blue-600 mb-4">
{{ title }}
</text>
<button
class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
>
点击我
</button>
</view>
</template>自定义样式
scss
// uni.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// 自定义样式
.custom-button {
@apply px-4 py-2 rounded-lg font-semibold;
&.primary {
@apply bg-blue-500 text-white;
}
&.secondary {
@apply bg-gray-200 text-gray-800;
}
}最佳实践
页面开发
- 使用 Vue 3 Composition API
- 合理使用 TypeScript 类型
- 遵循 UniApp 组件规范
- 使用条件编译处理平台差异
样式开发
- 优先使用 Tailwind CSS 类
- 使用 rpx 单位适配不同屏幕
- 遵循移动端设计规范
- 合理使用条件编译
性能优化
- 合理使用图片资源
- 避免过深的组件嵌套
- 使用条件编译优化代码
- 合理使用缓存机制
状态管理
- 简单状态使用 ref/reactive
- 复杂状态考虑 Pinia
- 合理使用 uni.storage
- 避免过度状态管理
部署
H5 部署
bash
# 构建 H5 版本
pnpm build
# 部署到静态服务器
# 将 dist/build/h5 目录上传到服务器小程序发布
- 构建对应平台的小程序
- 在对应开发者工具中预览
- 提交审核发布
App 发布
- 构建 App 版本
- 在 HBuilderX 中打包
- 上传到应用商店
部署到 Vercel
UniApp 应用可以部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。