为什么捐赠
API 浏览器
升级指南
创建新项目
quasar.config 配置文件
从 Webpack 项目转换
浏览器兼容性
TypeScript 支持
目录结构
命令列表
CSS 预处理器
使用 VueRouter 进行页面路由
懒加载 - 代码分割
资源处理
Boot 文件
预取特性
API 代理
配置 Vite
处理 import.meta.env
使用 Pinia 管理状态
代码检查与格式化
测试与审计
开发移动应用
Ajax 请求
开放开发服务器到公网
联系站长
Quasar CLI with Vite - @quasar/app-vite
开发 Capacitor 应用前准备

在深入到实际开发之前,需要做一些准备工作。

Step 1: 安装

Android 设置

  • 在电脑上安装 Android Studio 和 Android 平台 SDK。可以 在这里下载 Android Studio,之后可以参照这些 安装步骤

  • 安装好 Android SDK 后,运行 sdkmanager --licenses 来接受许可证。在当前版本的命令行工具中,sdkmanager 位于 $ANDROID_HOME/cmdline-tools/latest/bin

WARNING

ANDROID_HOME 是当前用于指定 Android SDK 位置的环境变量。ANDROID_SDK_ROOT 已被废弃;如果某个旧版工具仍然需要它,请将两个变量设置为相同的值。

  • 添加 Android 环境变量:

Unix (macOS, linux)

export ANDROID_HOME="$HOME/Android/Sdk"
export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/platform-tools"

在 macOS 上,默认 SDK 位置通常是 $HOME/Library/Android/sdk

Windows

setx ANDROID_HOME "%USERPROFILE%\AppData\Local\Android\Sdk"
setx path "%path%;%ANDROID_HOME%\cmdline-tools\latest\bin;%ANDROID_HOME%\platform-tools"
  • 启动 Android studio(检查安装目录中的可执行文件)。然后安装各个 SDK:

  • 打开窗口底部的 “Configure” 菜单:

  • 选择所需的 SDK 并点击 “Apply” 来安装 SDK。

iOS 设置

需要有一台安装了 Xcode 的 macOS 电脑。安装完毕后,打开 Xcode,以获得许可证提示。接受许可证,然后就可以关闭它了。

CocoaPods

如果您尚未安装 CocoaPods,请使用以下命令安装:sudo gem install cocoapods。否则,您可能会在开发或构建过程中遇到错误,例如:

terminal warning

[warn] Skipping pod install because CocoaPods is not installed,

Xcode Error

/path-to/your-project/src-capacitor/ios/App/Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig:1:1 unable to open configuration settings file

Step 2: 添加 Capacitor 模式

为了开发/构建一个移动应用程序,需要在 Quasar 项目中添加 Capacitor 模式。通过 Capacitor CLI 在 /src-capacitor 文件夹中生成一个 Capacitor 项目。

quasar mode add capacitor

Step 3: 开始开发

要用 HMR 启动一个开发服务器,运行以下命令:

quasar dev -m capacitor -T [android|ios]

一旦开发服务器准备就绪,IDE 将打开(Android Studio 或 Xcode),在 IDE 中可以手动选择模拟器(或同时选择多个!)并安装开发应用程序。也可以在连接的移动/平板电脑设备上运行开发应用。

WARNING

不要自动接受 Android Studio 的升级建议。请确保 Gradle、Android Gradle Plugin、Java 和 SDK 版本符合项目所使用的 Capacitor 主版本的要求。在更改原生工具链之前,请先查阅 Capacitor 的升级指南。

Gradle upgrade

如果遇到任何 IDE 错误,那么点击 File > Invalidate caches and restart。

Gradle upgrade