使用 Vue 和 Capacitor 构建移动应用

在本教程中，我们将指导您完成将Vue Web应用转换为原生移动应用的过程，使用Capacitor。您还可以选择使用Konsta UI，一个基于Tailwind CSS的移动UI库来增强您的移动UI。

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 后续使用。 dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

安装 Capgo Capacitor 作为开发依赖项，并在项目中设置它。在设置过程中，接受默认的名称和包 ID 值。

Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
添加平台，Capgo 将在您的项目根目录中创建每个平台的文件夹：
Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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 文件，指向您的构建命令的结果： 现在，您可以构建您的Vue项目并将其同步到__CAPGO_KEEP_0__: 构建和部署本机应用

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

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

Build and Deploy Native Apps

为了开发iOS应用，您需要安装Xcode，并且需要安装Android Studio来开发Android应用。此外，您需要在Apple Developer Program中注册以在App Store上发布iOS应用，在Google Play Console中注册以在Google Play Store上发布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

现在，您的应用将自动重载并显示更新的Vue应用内容。

使用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>

安装新插件后，运行命令并将应用程序重新部署到您的设备： sync 添加 Konsta UI

npx cap sync

要在 Vue 应用程序中使用 Konsta UI，您需要先安装

并安装包：要在 Vue 应用程序中使用 Konsta UI，请安装包并修改文件：在文件中将应用程序包裹在 tailwind.config.js 组件中，并在 Vue 页面中使用 Konsta UI Vue 组件。

npm i konsta

结论 App __CAPGO_KEEP_0__ pages/_app.vue __CAPGO_KEEP_1__

__CAPGO_KEEP_2__

Capacitor 是一个很好的选择，用于基于现有 Web 项目构建原生应用。通过添加 Capgo，甚至更容易将实时更新添加到您的应用中，使您的用户始终能够访问最新的功能和 bug 修复。

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

使用Vue和Capacitor构建移动应用