quasar-v2(vue3)搭建quasar app - cordova开发环境

前言

个人博客 已更新该文章(免费) — quasar app - cordova开发环境

在vue3出来后，quasar也从升级quasarv2，那么quasarv2后quasar app怎么搭建呢？

安装环境

node:v16.16.0
在quasar cli 基础上，安装cordova

 npm install -g cordova

下载Android Studio 和gradle
将Gradle添加到path。因为gradle没有安装程序。 您只需将二进制文件放在所需的位置，然后将bin目录添加到path中。
博主在c盘新建文件夹Gradle，将下载的gradle安装包解压当前文件夹

可以看到bin目录 是不是很熟系 ，然后将其添加到环境变量path中

同时也可以尝试

如果您有用于命令提示符或Powershell的初始化脚本，则可以尝试以下操作：

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;<gradle_path>\bin;"

官网告诉我们，环境变量ANDROID_HOME已被弃用，并被替换为ANDROID_SDK_ROOT。但Android Studio版本缘故，可能需要一个或另一个。两样都准备好也没什么坏处。

接下来 安装工具后，应该使用正确的SDK设置Android Studio并创建虚拟机。
但是呢下载Android Studio虚拟机 内存很庞大，同时因为博主不是Android开发，就不给大家演示这个，感兴趣的小伙伴可以自行去了解。我们使用 类似于市面上的雷电模拟器之类一样可以，调试使用谷歌地址 chrome://inspect/#devices

创建项目

创建quasar 项目 选择quasar cli 创建 标准项目

yarn create quasar 

创建成功后使用 quasar dev 运行一下 出现quasar 默认页面就ok

创建cordova

直接 运行开发启动命令， 缺少Cordova模式和项目，它将自动添加。

quasar dev -m cordova -T android|ios 

//cd
cd src-cordova 
//验证所有内容是否正常
cordova requirements

可以看到我们的环境信息

调试环境

这问题之后呢 打开雷电模拟器之后
运行启动命令时会让 选择ip 选择我们模拟器的ip就行

浏览器地址输入 chrome://inspect/#devices 看到我们运行的地址 点击inspect (需要科学上网)


这样我们就可以进行 调试 bug， dom ，在模拟器中 调试app内置功能 当然模拟器毕竟有限，所以真机调试是很有必要的，数据线连接手机 选择手机ip即可，部分手机会有安全限制，可以在开发者选项更改，手机型号不同，方式也不同。
文章基本就到这里了，谢谢大家支持 ，专栏也会持续更新…