使用Vue和Capacitor构建移动应用

In this tutorial, we’ll guide you through the process of converting a Vue web application into a native mobile app using Capacitor. Optionally, you can also enhance your mobile UI with Konsta UI, a Tailwind CSS-based mobile UI library.

关于Capacitor

Capacitor 是一个颠覆性的工具，它使您能够轻松将其集成到任何 Web 项目中，并将应用程序转换为原生移动应用。它为您生成原生 Xcode 和 Android Studio 项目，并通过 JavaScript 桥提供对原生设备功能（如相机）的访问。

为 Vue 应用程序做好准备

首先，通过运行以下命令创建一个新 Vue 应用程序：

vue create my-app
cd my-app
npm install

要为原生移动部署做好 Vue 应用程序的准备，您需要导出您的项目。将一个脚本添加到您的 package.json 文件中，用于构建和复制 Vue 项目：

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

运行命令后，您应该在项目根目录中看到一个新的 build 文件夹。这个文件夹将由 __CAPGO_KEEP_0__ 后来使用。 dist 将 Capacitor 添加到您的 Vue 应用程序中

将 Capacitor 添加到您的 Vue 应用程序中

将您的 Vue 网页应用转换为原生移动容器，请遵循以下步骤：

安装 Capacitor CLI 作为开发依赖项，并在您的项目中设置它。接受名称和包 ID 的默认值。
安装核心包和 iOS 和 Android 平台的相关包。
添加平台，Capacitor 将在您的项目根目录创建每个平台的文件夹：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

您现在应该看到新的 iOS 和 android 文件夹在您的 Vue 项目中。

更新 capacitor.config.json 文件以指向 webDir 到构建命令的结果：

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

现在，您可以构建您的Vue项目并同步它与Capacitor:

npm run build
npx cap sync

构建和部署原生应用

要开发iOS应用，您需要安装Xcode，并且要开发Android应用，您需要安装Android Studio。此外，您需要在Apple Developer Program中注册以便在iOS上发布应用，并在Google Play Console中注册以便在Android上发布应用以便在应用商店上发布应用。

使用Capacitor CLI打开两个原生项目：

npx cap open ios
npx cap open android

使用Android Studio或Xcode将应用部署到连接的设备上。

Capacitor实时重载

在移动设备上启用实时重载，通过让Capacitor应用从您的网络上的特定URL加载内容。

找到您的本地IP地址并更新 capacitor.config.ts 文件以正确的IP和端口：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

将这些更改复制到您的原生项目中：

npx cap copy

Now, your app will automatically reload and show changes when you update your Vue app.

使用 Capacitor 插件

安装一个 Capacitor 插件，例如分享插件，并在您的 Vue 应用程序中使用它：

npm i @capacitor/share

导入包并在应用程序中调用函数： share() 安装新插件后，运行命令并将应用程序重新部署到您的设备：

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

添加 Konsta UI sync 要在 Vue 应用程序中使用 Konsta UI，您需要先安装 Tailwind 并安装包：要在 Vue 应用程序中使用 Konsta UI，请安装包并修改文件：

npx cap sync

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ npx cap add __CAPGO_KEEP_0__ npx cap open __CAPGO_KEEP_0__ tailwind.config.js npx cap sync __CAPGO_KEEP_0__

npm i konsta

Wrap your app with the App component in the pages/_app.vue file, and use Konsta UI Vue components in your Vue pages.

结论

Capacitor 是一个基于现有 web 项目构建原生应用的很好的选择。通过添加 Capgo，您甚至可以更轻松地将实时更新添加到应用中，从而确保您的用户始终可以访问最新的功能和 bug 修复。

了解 Capgo 如何帮助您快速构建更好的应用，注册免费账户今天。

继续 Building Mobile Apps with Vue 和 Capacitor

如果您正在使用 Building Mobile Apps with Vue 和 Capacitor 来规划原生媒体和界面行为，连接它使用 @capgo/capacitor-live-activities 为使用 @capgo/capacitor-live-activities 的原生能力 @capgo/capacitor-live-activities 为 @capgo/capacitor-live-activities 的实现细节使用 @capgo/capacitor-video-player 为使用 @capgo/capacitor-video-player 的原生能力 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的实现细节,以及使用 @capgo/capacitor-native-navigation 为使用 @capgo/capacitor-native-navigation 的原生能力

Capacitor与Vue构建移动应用