在本教程中，我们将从创建一个新的Web应用开始，使用 Quasar。之后，我们将学习如何将其转换为使用Capacitor的移动应用。如果您想让您的应用在移动设备上看起来更好。
使用Capacitor，您可以将Quasar Web应用转换为移动应用，无需进行大量繁琐的工作或学习一种完全新的应用开发方式，如React Native所需。
本教程将指导您完成整个过程，首先是新Quasar应用，然后将Capacitor引入，以便进入原生移动应用的领域。此外，您还将使用 Capgo To __CAPGO_KEEP_0__ your app in seconds.
关于 Capacitor
CapacitorJS 是真正的游戏改变者！您可以轻松将其整合到任何 web 项目中，它将将您的应用程序包装在一个本机 webview 中，生成本机 Xcode 和 Android Studio 项目。另外，它的插件提供了访问本机设备功能的 JS 桥，如摄像头。
通过 Capacitor，您可以获得一个无需复杂设置或陡峭学习曲线的精美本机移动应用。它的 API 和功能流线化使其轻松地整合到您的项目中。相信我，您将惊叹于如何轻松地实现一个功能齐全的本机应用程序的 Capacitor！
为 Quasar 应用程序做好准备
要创建一个新的 Quasar 应用程序，请运行以下命令：
npm init quasar
选择“带有 Quasar CLI”选项，然后选择“Quasar v2”。
为了创建一个本机移动应用，我们需要一个 export 我们的项目。因此，让我们在我们的 package.json 可以用来构建和复制 Quasar 项目的工具:
{
"scripts": {
// ...
"build": "quasar build"
}
}执行命令后 generate你应该在项目根目录下看到一个新的 dist 这个文件夹将由 __CAPGO_KEEP_0__ 后续使用，但现在我们必须正确设置它。
将 Capacitor 添加到 Quasar 应用程序中
Adding Capacitor to Your Quasar App
命令。 sync 首先，我们可以将
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI 接下来，我们需要安装核心包和 iOS 和 Android 平台的相关包。
Next, we need to install the core package and the relevant packages for the iOS and Android platforms.
最后，我们可以添加平台，Capacitor将在项目根目录创建每个平台的文件夹：
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your Quasar 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
此时，您应该能够观察到Quasar项目中新的 ios 和 android 文件夹。这些是真正的本机项目！
要在将来访问Android项目，您必须安装
Android Studio 。对于iOS，您需要一台Mac，并应安装Xcode android.
另外，您应该在项目中找到一个 capacitor.config.ts 文件，它包含一些基本的Capacitor设置，这些设置在同步过程中会被使用。您需要注意的是 webDir,它必须指向您的构建命令的结果。目前它是不准确的。
为了修复这个问题，请打开 capacitor.config.json 文件并更新 webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}您可以通过执行以下命令来尝试：
npm run generate
npx cap sync第一个命令 npm run generate 仅仅会构建您的Quasar项目并复制静态构建，而第二个命令 npx cap sync 会将所有的 web code 同步到原生平台的正确位置，以便在应用中显示。
此外，同步命令可能会更新原生平台并安装插件，因此当您安装新的 Capacitor 插件 时，需要重新运行 npx cap sync 命令。
不经意间，您现在实际上已经完成了，所以让我们在设备上查看应用！
构建和部署原生应用
为了开发 iOS 应用，您需要安装 Xcode ，并且为了开发 Android 应用，您需要安装 Android Studio 。此外，如果您打算在应用商店上发布应用，则需要在 iOS 中加入 Apple Developer Program，并在 Android 中加入 Google Play Console。
如果您是native移动开发的新手，可以使用Capacitor CLI轻松打开native项目:
npx cap open ios
npx cap open android一旦您设置了native项目，部署应用到连接设备就很容易了。在Android Studio中，只需等待所有内容就绪，然后您可以在不更改任何设置的情况下将应用部署到连接设备。以下是一个示例:
在Xcode中，您需要设置签名账户才能将应用部署到真实设备，而不是仅仅在模拟器上运行。如果您之前没有这样做过，Xcode会指导您完成此过程（但请再次注意，您需要注册开发者计划）。完成后，您只需点击播放即可在连接设备上运行应用，您可以在顶部选择设备。以下是一个示例:
恭喜！您成功部署了Quasar Web应用到移动设备。以下是一个示例:
但请稍等，开发期间还有更快的方法……
Capgo Live Update
Capgo Live Update是一项服务，允许开发者在不通过传统App Store提交过程的情况下部署应用更新。这可以是一种快速修复bug或对应用进行小更新的便捷方式，而无需等待App Store审查过程。
将Capgo集成到您的Quasar应用中是一个简单的过程，能够让您利用实时更新的力量。这一步步指南将带您完成Capgo实时更新的集成和实现，使您能够提供无缝的更新。
注册并访问Capgo控制台:
是时候注册并获取您的API密钥来上传您的第一个版本！开始通过 注册一个Capgo账户.
安装Capgo SDK:
从命令行直接到您的Capacitor应用的根目录中运行：
npm i @capgo/capacitor-updater && npx cap sync 将插件安装到您的Capacitor应用中。
然后将code添加到您的应用中，作为CodePush的替代品：
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()这将告诉原生插件安装成功。
登录到Capgo CLOUD:
首先使用 all apikey 在您的帐户中登录使用 CLI:
`npx @capgo/cli@latest login YOU_KEY`添加您的第一个应用:
让我们从创建一个应用开始 Capgo 云中使用 CLI。
npx @capgo/cli@latest app add此命令将使用 Capacitor 配置文件中定义的所有变量来创建应用。
上传您的第一个版本:
使用以下命令构建您的 code 并将其发送到 Capgo:
npx @capgo/cli@latest bundle upload`默认情况下，版本名称将是您的 package.json 文件中的一个。
检查入 Capgo 如果构建存在。
您甚至可以使用我的 移动沙盒应用测试它.
设置默认频道:
您已经将应用程序发送到Capgo，接下来您需要将频道设置为默认频道，以便应用程序可以从Capgo接收更新。
npx @capgo/cli@latest channel set production -s default
配置应用程序以验证更新:
将此配置添加到主JavaScript文件中。
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()然后执行 npm run build && npx cap copy 更新您的应用程序。
实时更新:
为了让您的应用程序从Deploy接收实时更新，您需要在设备或模拟器上运行应用程序。最简单的方法是使用以下命令直接在模拟器或连接到计算机的设备上启动本地应用程序。
npx cap run [ios | android]打开应用程序，放到后台，然后再次打开它，您应该在日志中看到应用程序已经更新。
恭喜！ 🎉 您已经成功部署了第一个实时更新。这只是您可以使用实时更新的开始。要了解更多信息，请查看完整的 实时更新文档.
使用Capacitor插件
让我们看看如何使用一个 Capacitor 插件的实例，这个我们之前提到过几次。要做到这一点，我们可以通过运行：
npm i @capacitor/share没有什么特别的关于这个 分享插件,但它仍然会弹出原生分享对话框！ share() 为了实现这一点，我们现在只需要导入包并从我们的应用中调用相应的 函数，所以让我们将 pages/index.vue
<template>
<div>
<h1>Welcome to Quasar 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>改成这个：
npx cap sync如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要做到这一点，请运行以下命令：
点击按钮后，您可以亲眼目睹美丽的原生分享对话框！
可选：添加 Konsta UI 要在 Quasar 应用中使用 Konsta UI，您需要先安装 并且安装包:
npm i konsta另外，您需要修改您的 tailwind.config.js 文件：
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./pages/**/*.{vue}',
'./components/**/*.{vue}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig 将扩展默认（或您的自定义）Tailwind CSS配置文件，添加一些额外的变体和辅助工具以支持Konsta UI。
现在我们需要设置主 App 组件，以便我们可以设置一些全局参数（如 theme).
我们需要将整个应用程序包裹在 App 中 pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>示例页面
现在当一切设置好时，我们可以在Quasar页面中使用Konsta UI Vue组件。
例如，让我们打开 pages/index.vue 如果 live reload 在安装所有必要组件后出现了延迟，尝试重新启动。重新启动后，您应该看到一个具有某种本机外观的移动应用程序，使用 Quasar 和 __CAPGO_KEEP_0__ 构建。
<template>
<Page>
<Navbar title="My App" />
<Block strong>
<p>
Here is your Quasar & Konsta UI app. Let's see what we have here.
</p>
</Block>
<BlockTitle>Navigation</BlockTitle>
<List>
<ListItem href="/about/" title="About" />
<ListItem href="/form/" title="Form" />
</List>
<Block strong class="flex space-x-4">
<Button>Button 1</Button>
<Button>Button 2</Button>
</Block>
</Page>
</template>
<script setup>
import {
Page,
Navbar,
Block,
Button,
List,
ListItem,
Link,
BlockTitle,
} from 'konsta/vue';
</script>If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with Quasar and Capacitor!
__CAPGO_KEEP_0__ 是基于现有 Web 项目构建本机应用程序的优秀选择，提供了一个简单的方式来共享 __CAPGO_KEEP_1__ 并保持 UI 的一致性。
Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.
__CAPGO_KEEP_0__ Capgo如果您想学习如何将 __CAPGO_KEEP_0__ 添加到您的 Next.js 应用程序中，请查看下一篇文章：
继续阅读《创建具有实时更新的移动应用程序，Quasar 和 Capgo》。
Keep going from Creating Mobile Apps with live updates, Quasar and Capacitor.
创建具有实时更新的移动应用程序，Quasar 和 __CAPGO_KEEP_0__ Creating Mobile Apps with live updates, Quasar and Capacitor. __CAPGO_KEEP_0__ 是一个强大的工具，允许您将 Web 应用程序转换为本机应用程序，具有本机外观和感觉。它还提供了实时更新功能，使您的应用程序始终保持最新。 Capgo 插件目录 为产品工作流程在 Capgo 插件目录中 Capacitor 插件由 Capgo 为实现细节在 Capacitor 插件由 Capgo 中 添加或更新插件 为实现细节在添加或更新插件中 Ionic Enterprise 插件替代品 为产品工作流程在 Ionic Enterprise 插件替代品中 Capgo 原生构建 为产品工作流程在 Capgo 原生构建中
