Vue3 原生移动应用开发来了

Vue3 配合 Capacitor 或 Cordova 可以开发原生移动应用。我将为你提供一个完整的 Vue3 + Capacitor 实现方案。

实现思路

使用 Vue3 构建 Web 应用
通过 Capacitor 将 Web 应用打包为原生应用
添加原生功能调用（如相机、文件系统等）
设计响应式 UI 适配不同设备

代码实现

下面是完整的 Vue3 + Capacitor 移动应用示例：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 移动应用</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    body {
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }
    
    .app-container {
      max-width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    header {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      color: white;
      padding: 1rem;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .main-content {
      flex: 1;
      padding: 1rem;
    }
    
    .card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    h1 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    
    h2 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      color: #444;
    }
    
    p {
      margin-bottom: 1rem;
    }
    
    .button-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    button {
      background: #2575fc;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      flex: 1;
      min-width: 120px;
    }
    
    button:hover {
      background: #1a68e8;
      transform: translateY(-2px);
    }
    
    button:active {
      transform: translateY(0);
    }
    
    button.secondary {
      background: #6c757d;
    }
    
    button.success {
      background: #28a745;
    }
    
    button.warning {
      background: #ffc107;
      color: #212529;
    }
    
    .feature-list {
      list-style-type: none;
    }
    
    .feature-list li {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    
    .feature-list li:before {
      content: "✓";
      color: #28a745;
      font-weight: bold;
      margin-right: 10px;
    }
    
    footer {
      background: #343a40;
      color: white;
      text-align: center;
      padding: 1rem;
      font-size: 0.9rem;
    }
    
    .status-message {
      margin-top: 1rem;
      padding: 10px;
      border-radius: 6px;
      background: #e9ecef;
    }
    
    .status-message.success {
      background: #d4edda;
      color: #155724;
    }
    
    .status-message.error {
      background: #f8d7da;
      color: #721c24;
    }
    
    @media (max-width: 480px) {
      .button-group {
        flex-direction: column;
      }
      
      button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <header>
        <h1>Vue3 移动应用</h1>
        <p>使用 Vue3 + Capacitor 构建</p>
      </header>
      
      <main class="main-content">
        <div class="card">
          <h2>应用功能</h2>
          <p>这是一个使用 Vue3 和 Capacitor 构建的跨平台移动应用示例。</p>
          
          <ul class="feature-list">
            <li>响应式设计，适配各种屏幕尺寸</li>
            <li>访问设备原生功能（相机、文件系统等）</li>
            <li>跨平台部署（iOS、Android、Web）</li>
            <li>Vue3 组合式 API</li>
            <li>现代化 UI 设计</li>
          </ul>
        </div>
        
        <div class="card">
          <h2>设备功能演示</h2>
          <p>点击按钮测试设备功能（在真实设备上有效）</p>
          
          <div class="button-group">
            <button @click="showNotification">发送通知</button>
            <button @click="getLocation" class="secondary">获取位置</button>
            <button @click="takePhoto" class="success">拍照</button>
            <button @click="vibrate" class="warning">振动</button>
          </div>
          
          <div v-if="statusMessage" :class="['status-message', statusType]">
            {{ statusMessage }}
          </div>
        </div>
        
        <div class="card">
          <h2>关于 Capacitor</h2>
          <p>Capacitor 是 Ionic 团队开发的开源原生运行时，用于构建跨平台 iOS、Android 和 Web 应用。</p>
          <p>与 Cordova 相比，Capacitor 提供了更现代化的 API 和更好的性能。</p>
        </div>
      </main>
      
      <footer>
        <p>Vue3 + Capacitor 移动应用示例 &copy; 2023</p>
      </footer>
    </div>
  </div>

  <script>
    const { createApp, ref } = Vue;
    
    createApp({
      setup() {
        const statusMessage = ref('');
        const statusType = ref('');
        
        const showStatus = (message, type = '') => {
          statusMessage.value = message;
          statusType.value = type;
          setTimeout(() => {
            statusMessage.value = '';
            statusType.value = '';
          }, 3000);
        };
        
        const showNotification = () => {
          // 在实际应用中，这里会调用 Capacitor 的通知 API
          if ('Notification' in window && Notification.permission === 'granted') {
            new Notification('Vue3 应用通知', {
              body: '这是一个来自 Vue3 应用的通知示例'
            });
            showStatus('通知已发送', 'success');
          } else {
            showStatus('通知权限未授予', 'error');
          }
        };
        
        const getLocation = () => {
          // 在实际应用中，这里会调用 Capacitor 的地理位置 API
          if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(
              position => {
                const { latitude, longitude } = position.coords;
                showStatus(`位置获取成功: ${latitude.toFixed(4)}, ${longitude.toFixed(4)}`, 'success');
              },
              error => {
                showStatus('位置获取失败: ' + error.message, 'error');
              }
            );
          } else {
            showStatus('此设备不支持地理位置功能', 'error');
          }
        };
        
        const takePhoto = () => {
          // 在实际应用中，这里会调用 Capacitor 的相机 API
          showStatus('相机功能在 Web 浏览器中受限，请在移动设备上测试', 'error');
        };
        
        const vibrate = () => {
          // 在实际应用中，这里会调用 Capacitor 的振动 API
          if ('vibrate' in navigator) {
            navigator.vibrate(200);
            showStatus('设备已振动', 'success');
          } else {
            showStatus('此设备不支持振动功能', 'error');
          }
        };
        
        // 请求通知权限
        if ('Notification' in window && Notification.permission === 'default') {
          Notification.requestPermission();
        }
        
        return {
          statusMessage,
          statusType,
          showNotification,
          getLocation,
          takePhoto,
          vibrate
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

部署为原生应用

要将此 Vue3 应用部署为原生移动应用，需要以下步骤：

1. 安装和配置 Capacitor

复制代码

# 在 Vue 项目中安装 Capacitor
npm install @capacitor/core @capacitor/cli
npm install @capacitor/android @capacitor/ios

# 初始化 Capacitor
npx cap init MyVueApp com.example.myvueapp

# 添加平台
npx cap add android
npx cap add ios

2. 修改 capacitor.config.json

复制代码

{
  "appId": "com.example.myvueapp",
  "appName": "MyVueApp",
  "webDir": "dist",
  "bundledWebRuntime": false
}

3. 构建和部署

复制代码

# 构建 Vue 应用
npm run build

# 复制构建文件到原生项目
npx cap copy

# 打开原生开发环境
npx cap open android
npx cap open ios

原生功能集成

在 Vue3 组件中使用 Capacitor 插件：

复制代码

import { Camera } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { LocalNotifications } from '@capacitor/local-notifications';

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

// 获取位置
const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

// 发送本地通知
const showNotification = async () => {
  await LocalNotifications.schedule({
    notifications: [
      {
        title: "Vue3 应用",
        body: "这是一个本地通知",
        id: 1
      }
    ]
  });
};

总结

这个示例展示了如何使用 Vue3 和 Capacitor 构建跨平台移动应用。通过这种方式，你可以：

使用熟悉的 Vue3 开发 Web 应用
访问设备原生功能（相机、地理位置、通知等）
打包为 iOS 和 Android 应用
保持单一代码库，降低维护成本

实际开发中，你还可以结合 Vue Router 进行导航管理，使用 Pinia 进行状态管理，以及集成更多 Capacitor 插件来扩展应用功能。