Quasar 移动端 APP 环境配置详解

参考网页:http://www.quasarchs.com/quasar-cli/developing-cordova-apps/preparation/

以下是该网页的图解

1. 首先我们第一步是确保安装了 Cordova CLI 和必要的 SDK,可以如下操作:

image001.png

结果如图这样就表示装好了。

2. 下载 Andriod studio,配置其环境

a. 下载链接:https://developer.android.google.cn/studio/

注意:这里是官网的链接,我们需要下载的是专业版,注意在下载的时候选择专业版

b. 下载好 Android studio 后还需要安装两个东西

① 来自 Oracle 的 JDK。(也就是 JAVA 的 JDK,这里必须下载特定的版本为 Java 8 )

为了方便下载可以点击链接下载:

链接:https://pan.baidu.com/s/1sHntW1ZR8h4kw5uwBGON5w

提取码:jdk8

下载下来就是这个文件

image003.png

② 配置 android 的环境变量:

Ⅰ. 新建用户变量;

变量名为:ANDROID_SDK_ROOT

变量值为:%USERPROFILE%\AppData\Local\Android\Sdk

注:%% 括起来的部分为电脑下的用户路径,下图图例的用户就是 User 下的 admin 目录

image005.png

Ⅱ. 新建用户变量;

变量名为:ANDROID_HOME

变量值为:%USERPROFILE%\AppData\Local\Android\Sdk

注:%% 括起来的部分为电脑下的用户路径,下图图例的用户就是 User 下的 admin 目录

image007.png

③ Gradle. 曾经可以在 Android Studio 中使用,但是现在您必须单独安装它。 Cordova 需要一个非常特定的版本。

下载链接:https://downloads.gradle-dn.com/distributions/gradle-4.10.3-all.zip

下载后解压缩,同样记住好路径

配置环境变量:

变量名为:Gradle_HOME

变量值为:C:\gradle-4.10.3

注:上述变量值为你下载解压缩后 gradle 的根目录路径

image009.png

再在 Path 里新建一个 gradle 变量

如图所示

image011.png

④ 配置 path 的变量

Ⅰ. 添加 platform-tools 的变量

双击 Path

image013.png

接下来点击新建

image015.png

新建填入:%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools/

注:%% 括起来的部分为电脑下的用户路径,下图图例的用户就是 User 下的 admin 目录

image017.png

ⅠⅠ. 新建 cmdline-tools/latest/bin

输入 %USERPROFILE%\AppData\Local\Android\Sdk\cmdline-tools\latest\bin

即刚才添加 ANDROID_HOME 的路径加上 cmdline-tools\latest\bin

如图:

image019.png

ⅠⅠⅠ. 添加 emulator 变量

输入 %USERPROFILE%\AppData\Local\Android\Sdk\emulator

即刚才添加 ANDROID_HOME 的路径加上 emulator

如图:

image021.png

接下来打开 Android studio

image023.png

按照图示点击 SDK Manger

点击 SDK Platforms,选择选中的 SDK 其中 29 为必选,其他建议都勾选上

注:千万不要勾上 31

image025.png

然后点击 Apply 应用按照提示等待安装好 sdk

接着点击 SDK tools,按照图示点击右下角的 show package details

然后选择 31.0.0 取消勾选上,然后勾上 29.0.3 最后 apply 安装上

image027.png

安装完成后,回到主界面 然后点击 AVD Manger

image029.png

然后店家新增

image031.png

然后选择一台设备 phone,然后右边的机型随便哪一个 这里就拿第一个做例子

image033.png

点击右下角 next

选择安装 29

等待下载完成

image035.png

3. 检查安装好的环境

进入项目的 src-cordova 运行终端

image037.png

输入 cordova requirements 检查环境,如果成功的话如下所示:

image039.png

到此环境就装好了!

最后,连接上安卓设备,在 templates 目录下面,quasar d -m cordova -T andorid 来启动设备,需要保证在同一网络下!