vue+quasar开发移动app-搭建项目


dl的收录集dl的个人博客网站 | 首页https://dlyjc.link/

一、 quasar相关 

quasar仅支持node版本>=10和npm>=5 

Download | Node.js

//在NPM 中安装 yarn
npm install -g yarn

使用yarn 安装quasar脚手架

$ yarn global add @quasar/cli
或者
$ npm install -g @quasar/cli

 然后打开cmd 我们使用Quasar CLI创建一个项目文件夹:

$ quasar create 项目名称

 

 回车创建项目  

 这里选择 上下键 按空格选中

使用 yarn 安装项目依赖  等待项目创建成功 就可以 cd  进去啦        quasar dev 运行一手

quasar部分就完了 ,我们期望是移动app 得构建android啦

二、android相关

    构建android应用要配置jdk、android sdk、gradle等。,quasar内部使用了cordova框架来构建android。而我们默认的cordova对jdk这些东西的版本有要求。

第一步是确保安装了Cordova CLI和必要的SDK。

$ yarn global add cordova
或者
$ npm install -g cordova

Android安装

  • 完成后,需要在你的计算机上安装Android平台SDK。 你可以在这里下载Android Studio然后按照这些安装步骤 进行安装。

  • Gradle在此处下载它 ,将Gradle添加到path. 注意,gradle没有安装程序。在c盘创建一个Gradle文件夹将下载的安装包解压当前文件夹 , 然后将bin目录 的 路径  添加到path中。
  • 同时在cmd中的初始化脚本 设置环境变量
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;"

第一次安装需要添加模拟器,就可以在模拟器运行

选择所需的SDK。 根据2019年12月的数据,Cordova需要android-28(Android 9.0-Pie),因此请确保将其包括在内。 点击“Apply”安装SDK。

 启动开发模式

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

  使用一个选定的Quasary主题(iOS平台下): 
$ quasar dev -m cordova -T ios -t ios

  使用一个选定的Quasary主题(Android平台下):
$ quasar dev -m cordova -T android -t mat

  使用特定的模拟器
$ quasar dev -m cordova -T android -e iPhone-7

模拟器 

  出现LAUNCH SUCCESS说明就OK了

 模拟器成功运行起项目啦  就可以进行开发啦!

 

  

现在我们在手机上看看效果

手机USB连接电脑

手机连接电脑后,打开手机的开发者模式,将USB调试功能打开
手机连接WIFI,保持和电脑处于同一个网段内
如果电脑插的是网线,没有WIFI的话,可以手机在移动网络共享里面打开USB共享网络

最下面会出现2个ip让你选择,一个是你电脑的IP,一个是手机的IP,这里选择手机的IP,回车  

 成功啦!

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值