前言

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

安装环境

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

npm install -g cordova

下载Android Studiogradle

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

quasar-v2搭建quasar app - cordova开发环境_vue3

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

quasar-v2搭建quasar app - cordova开发环境_quasar_02

同时也可以尝试

如果您有用于命令提示符或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-v2搭建quasar app - cordova开发环境_chrome_03

quasar-v2搭建quasar app - cordova开发环境_quasar_04

quasar-v2搭建quasar app - cordova开发环境_chrome_05

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

创建cordova

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

quasar dev -m cordova -T android|ios

quasar-v2搭建quasar app - cordova开发环境_Android_06

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

可以看到我们的环境信息

quasar-v2搭建quasar app - cordova开发环境_vue3_07

调试环境

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

quasar-v2搭建quasar app - cordova开发环境_Android_08

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

quasar-v2搭建quasar app - cordova开发环境_vue3_09

quasar-v2搭建quasar app - cordova开发环境_chrome_10

这样我们就可以进行 调试 bug, dom ,在模拟器中 调试app内置功能 当然模拟器毕竟有限,所以真机调试是很有必要的,数据线连接手机 选择手机ip即可,部分手机会有安全限制,可以在开发者选项更改,手机型号不同,方式也不同。

个人博客 --- quasar app - cordova开发环境

公众号:极客博文