使用PyCharm+Quasar+Capacitor项目创建移动应用

一、创建Quasar项目

1.yarn create quasar

2.修改quasar.config.ts->build->vueRouterMode: 'history',  // 必须使用history模式。

3.修改quasar.config.ts->build->distDir: 'dist/mobile',  // 统一移动端构建目录

二、安装电容器

在应用的根目录中，安装电容器的主要npm依赖项: 核心JavaScript运行时和命令行界面 (CLI)。

1.npm i @capacitor/core

2.npm i -D @capacitor/cli

三、初始化您的电容器配置

1. npx cap init

Web asset directory…dist/mobile

四、构建Quasar项目

1.quasar build

之后，会创建dist、dist\mobile文件夹。

五、创建您的Android和iOS项目

安装完电容核心运行时后，即可安装Android和iOS平台。

1.npm i @capacitor/android @capacitor/ios

六、一旦平台已添加到您的package.json,您可以运行以下命令为本机应用程序创建Android和iOS项目。

5.npx cap add android  // 创建Android项目

5’.npx cap add ios      // 创建ios项目

七、将web代码同步到本机项目

创建本机项目后，可以通过运行以下命令将web应用程序同步到本机项目。

1.npx cap sync

npx cap sync将复制您构建的web捆绑包，预计将在webDir的电容器配置文件添加到本机项目并安装本机项目的依赖项。

八、打开Android项目

要在Android Studio中打开项目，请运行:

1.npx cap open android

或者，您可以打开Android Studio并导入android/目录作为Android Studio项目。

2.配置Gradle：

 

九、运行你的应用

您可以在命令行或Android Studio上运行您的应用程序。

1.在命令行上运行，要在设备或仿真程序上运行项目，请运行:

npx cap run android

 该命令将提示您选择目标。了解更多关于run。

2. 使用Android Studio运行

在Android Studio中，首先选择设备或模拟器，然后单击运行或调试按钮以运行您的应用。除非您正在调试Java或Kotlin代码，否则运行按钮是首选。

 十、配置运行命令

 

 

 

https://capacitorjs.com/docs/getting-started