Capacitor 模板

基于 Vue 3 + Capacitor 的跨平台移动应用开发模板，支持 iOS 和 Android 平台，让你用 Web 技术构建原生移动应用。

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供类型安全
• Vite - 下一代前端构建工具
• Capacitor - 跨平台原生应用开发框架
• Vue Router - Vue.js 官方路由管理器
• Pinia - Vue 3 官方状态管理库
• Vue i18n - Vue.js 国际化插件
• Tailwind CSS - 实用优先的 CSS 框架

快速开始

创建项目

# 初始化项目
vup init my-project

# 进入项目目录
cd my-project

# 添加 Capacitor 应用
vup add my-mobile-app
# 选择 Capacitor 模板

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

开发服务器将在 http://localhost:9305 启动

移动端开发

# 添加 iOS 平台
pnpm ios:add

# 添加 Android 平台
pnpm android:add

# 构建并打开 iOS 项目
pnpm ios

# 构建并打开 Android 项目
pnpm android

项目结构

my-mobile-app/
├── public/                      # 静态资源
├── src/
│   ├── assets/                 # 资源文件
│   │   └── images/
│   │       ├── capacitor.svg
│   │       └── vue.svg
│   ├── locales/                # 国际化文件
│   │   ├── index.ts           # i18n 配置
│   │   ├── zh_CN.ts           # 中文语言包
│   │   └── en_US.ts           # 英文语言包
│   ├── router/                 # 路由配置
│   │   ├── index.ts           # 路由入口
│   │   └── routes.ts          # 路由定义
│   ├── views/                  # 页面组件
│   │   ├── demo/              # 演示页面
│   │   ├── docs/              # 文档页面
│   │   ├── empty/             # 空页面
│   │   └── index/             # 首页
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── ios/                        # iOS 原生项目
├── android/                    # Android 原生项目
├── capacitor.config.json       # Capacitor 配置
├── package.json                # 项目配置
├── tsconfig.json               # TypeScript 配置
└── vite.config.js              # Vite 配置

核心特性

🎯 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>

📱 跨平台移动开发

基于 Capacitor 的跨平台开发：

• iOS - 完整的 iOS 平台支持
• Android - 完整的 Android 平台支持
• Web - 现代浏览器支持
• PWA - 渐进式 Web 应用

🎨 响应式设计

基于 Tailwind CSS 的现代化 UI：

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-blue-600">
      {{ title }}
    </h1>
  </div>
</template>

<style lang="scss" scoped>
.container {
  @apply bg-white rounded-lg shadow-md;
}
</style>

🌍 多语言支持

内置完整的多语言支持：

<template>
  <div>
    <h1>{{ t('page.title') }}</h1>
    <p>{{ t('page.description') }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
</script>

🛣️ 路由管理

基于 Vue Router 的路由系统：

// router/routes.ts
export const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/index/Index.vue'),
  },
  {
    path: '/demo',
    name: 'Demo',
    component: () => import('@/views/demo/Demo.vue'),
  },
];

🏪 状态管理

使用 Pinia 进行状态管理：

// stores/demo.ts
import { defineStore } from 'pinia';

export const useDemoStore = defineStore('demo', () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment,
  };
});

开发工具

代码质量

• ESLint - 代码质量检查
• Prettier - 代码格式化
• TypeScript - 类型检查

开发命令

# 开发服务器
pnpm dev

# 构建项目
pnpm build

# 代码质量
pnpm lint
pnpm lint:fix

# 代码格式化
pnpm format
pnpm format:check

# 移动端开发
pnpm ios:add          # 添加 iOS 平台
pnpm ios:build        # 构建并同步到 iOS
pnpm ios:open         # 打开 iOS 项目
pnpm ios              # 一键构建并打开 iOS

pnpm android:add      # 添加 Android 平台
pnpm android:build    # 构建并同步到 Android
pnpm android:open     # 打开 Android 项目
pnpm android          # 一键构建并打开 Android

热重载

Capacitor 提供极速的热重载体验：

• 修改 Vue 文件时自动刷新
• 修改样式文件时热更新
• 保持应用状态

原生功能

Capacitor 插件

使用 Capacitor 插件访问原生功能：

import { Camera } from '@capacitor/camera';
import { SplashScreen } from '@capacitor/splash-screen';

// 相机功能
const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri,
  });

  return image.webPath;
};

// 启动屏幕
const hideSplash = async () => {
  await SplashScreen.hide();
};

平台检测

检测当前运行平台：

import { Capacitor } from '@capacitor/core';

// 平台检测
const isNative = Capacitor.isNativePlatform();
const platform = Capacitor.getPlatform();

if (platform === 'ios') {
  // iOS 特定代码
} else if (platform === 'android') {
  // Android 特定代码
} else {
  // Web 特定代码
}

原生 API 调用

调用原生 API：

import { Capacitor } from '@capacitor/core';

// 调用原生方法
const result = await Capacitor.Plugins.SomePlugin.someMethod({
  key: 'value',
});

配置管理

Capacitor 配置

{
  "appId": "com.example.app",
  "appName": "capacitor",
  "webDir": ".output",
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    }
  }
}

环境配置

// 环境变量配置
const config = {
  apiUrl: import.meta.env.VITE_API_URL || 'https://api.example.com',
  appVersion: import.meta.env.VITE_APP_VERSION || '1.0.0',
};

最佳实践

移动端开发

• 使用触摸友好的交互设计
• 优化移动端性能
• 合理使用原生插件
• 适配不同屏幕尺寸

样式开发

• 优先使用 Tailwind CSS 类
• 使用移动端优化的单位
• 遵循移动端设计规范
• 考虑不同平台的差异

状态管理

• 使用 Pinia 进行状态管理
• 合理拆分 store
• 使用 TypeScript 定义类型
• 避免在组件中直接修改状态

性能优化

• 合理使用图片资源
• 避免过深的组件嵌套
• 使用懒加载优化路由
• 优化原生插件使用

部署

Web 部署

# 构建 Web 版本
pnpm build

# 部署到静态服务器
# 将 .output 目录上传到服务器

移动端发布

iOS 发布

1. 在 Xcode 中打开 iOS 项目
2. 配置证书和签名
3. 构建并上传到 App Store

Android 发布

1. 在 Android Studio 中打开项目
2. 生成签名 APK
3. 上传到 Google Play Store

部署到 Vercel

Capacitor 应用可以部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。

相关资源

• Capacitor 官方文档
• Vue 3 官方文档
• TypeScript 官方文档
• Vite 官方文档
• Vue Router 官方文档
• Pinia 官方文档
• Vue i18n 官方文档
• Tailwind CSS 官方文档