为什么捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
转换为使用 Webpack 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码风格检查器
测试与审计
开发移动应用
Ajax 请求
向公众开放开发服务器
Quasar CLI 与 Webpack - @quasar/app-webpack
准备工作

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

步骤 1:安装

Android 设置

  • 您需要在您的机器上安装 Android Studio 和 Android 平台 SDK。您可以 在此处下载 Android Studio,然后按照这些 安装步骤

  • 确保在安装 Android SDK 后,接受其许可证。打开终端并转到 SDK 安装的文件夹,在 tools/bin 中调用 sdkmanager --licenses

警告

环境变量 ANDROID_HOME 已弃用,并替换为 ANDROID_SDK_ROOT。根据您的 Android Studio 版本,您可能需要其中一个或两个。同时设置两个也不会造成任何伤害。

  • 将 Android 安装添加到您的路径

Unix(macOS、Linux)

export ANDROID_HOME="$HOME/Android/Sdk"
export ANDROID_SDK_ROOT="$HOME/Android/Sdk"
PATH=$PATH:$ANDROID_SDK_ROOT/tools; PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

请注意,有时 /Android/Sdk 文件夹会添加到用户文件夹内的 /Library/ 中。检查您的用户文件夹,如果 /Android/ 文件夹仅位于 /Library/ 内,则执行以下操作:export ANDROID_SDK_ROOT="$HOME/Library/Android/Sdk"export ANDROID_HOME="$HOME/Library/Android/Sdk"

Windows

setx ANDROID_HOME "%USERPROFILE%\AppData\Local\Android\Sdk"
setx ANDROID_SDK_ROOT "%USERPROFILE%\AppData\Local\Android\Sdk"
setx path "%path%;%ANDROID_SDK_ROOT%\tools;%ANDROID_SDK_ROOT%\platform-tools"
  • 启动 Android studio(检查您安装它的文件夹中的可执行文件)。下一步是安装各个 SDK。

  • 打开窗口底部的“配置”菜单。

  • 选择所需的 SDK,然后单击“应用”以安装 SDK。

iOS 设置

您需要一台安装了 Xcode 的 macOS。安装后,打开 Xcode 以获取许可证提示。接受许可证,然后您可以关闭它。

CocoaPods

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

终端警告

[警告] 由于未安装 CocoaPods,因此跳过 pod install,

Xcode 错误

/path-to/your-project/src-capacitor/ios/App/Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig:1:1 无法打开配置设置文件

步骤 2:添加 Capacitor Quasar 模式

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

$ quasar mode add capacitor

步骤 3:开始开发

要使用 HMR 启动开发服务器,请运行以下命令

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

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

警告

在 Android Studio 中,您会收到一条建议升级 Gradle 版本的消息。**不要升级 Gradle**,因为它会破坏 Capacitor 项目。其他任何请求的升级也是如此。

Gradle upgrade

如果遇到任何 IDE 错误,请单击文件 > 使缓存失效并重新启动。

Gradle upgrade