Vue + quasar-framework进行Vue混合app开发 ─ App真机调试(三)

最新推荐文章于 2024-07-23 17:06:34 发布
最新推荐文章于 2024-07-23 17:06:34 发布
阅读量7.7k 收藏 2
点赞数
分类专栏： vue混合app开发 文章标签： vue quasar Hybrid cordova
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liub37/article/details/83901571
版权
本文介绍了使用Vue.js和quasar-framework进行混合app开发时的真机调试步骤。通过开启手机开发者模式，USB调试，并确保手机与电脑在同一网络环境下，可以在Chrome浏览器中进行远程调试。在调试界面中，可以访问Elements、Console、Sources和Network等工具，实现与web端代码调试相同的体验。
摘要由CSDN通过智能技术生成

写代码总避免不了会出错需要调试，Quasar混合开发的app调试方法也很简单，就和平时写web端代码调试一样。
此处列几种常用的调试方法

真机调试

真机调试也就是用自己的手机进行调试，完全真实环境。
手机连接电脑，打开手机的开发者模式，将USB调试功能打开
手机连接WIFI，保持和电脑处于同一个网段内
如果电脑插的是网线，没有WIFI的话，可以手机在移动网络共享里面打开USB共享网络。
准备就绪后启动项目，启动完成后
在chrome地址栏输入chrome://inspect/#devices
会出现以下的界面，点击相应应用的inspect进入调试

第一次使用需要科学上网，自备梯子

Vue + quasar-framework进行Vue混合app开发
很熟悉的界面，Elements、console、Source、Network都有
Vue + quasar-framework进行Vue混合app开发
Vue + quasar-framework进行Vue混合app开发

最低0.47元/天 解锁文章
寻梦无痕
关注
专栏目录
【重点突破】—— quasar 与 uniapp 选型简单对比
柳柳66的博客
06-27 1620
文章来自不饿不饿不饿的掘金博客 对于这两个框架我都分别用来写过不大不小的项目, 所以对比还算客观, 因为我是推荐用 quasar 的, 所以我先从一定不会选 quasar 的场景开始 不选 quasar 的场景 有开发小程序需求 对于只想一套代码就能有不错的原生 app, 这里提一句, 对于 app 的生成, quasar 是用 Cordova 做的套壳 app, 本质还是网页, 而 u...
二、 quasar 项目创建及运行
Fx的博客
11-15 9505
quasar 项目创建 控制台输入 quasar create your_project_name (第一次输入该命令会下载 quasar 模板,耐心等待下载完成,如果长时间没有下载完成,可以按 Ctrl + C 来取消任务后重新输入创建项目的指令) Project name (your_project_name) 输入项目名称,输入回车默认括号内的名称,括号内的名称是上面 quasa...
在VS Code中调试Quasar项目
HouYing
10-30 1069
这里重点说的是devtool: 'source-map' 用来解决debuger定位行不准确问题 首先，转到用于Chrome的调试器并仔细阅读。 然后，由于Quasar是基于Vue的，所以您还需要参考VSCode调试的Vue指南用于设置调试Vue应用程序。 最好的方法是在这个页面旁边的浏览器中打开它，这样你可以在阅读这些说明的同时查看那些说明。并将更改应用到您的项目中。 Vue指南的第一步是启用源映射(source maps)。Quasar自动启用开发模式的源映射。这是一篇好文章，它描述了[webp.
quasar框架+Cordova+Android开发环境搭建
leida_wt的博客
03-25 6171
quasar+cordova安卓打包环境的配置方法。本文对官方教程做一些补充。
【vue前端项目实战案例】之Vue仿饿了么App
最新发布
柯晓楠
07-23 1026
该项目是一款仿“饿了么”商家页面的外卖类App，主要有以下功能。首先需要安装Node.js 12以上的版本，因为Node.js中已经继承了NPM，所以无需在单独安装NPM。然后再安装Vue脚手架（Vue-CLI）以及创建项目。 项目的调试使用Google Chrome浏览器的控制台进行，在浏览器中按下F12键，然后单击“切换设备工具栏”，进入移动端的调试界面，可以选择相应的设备进行调试，效果如图1 所示。
记录一次quasar + uni-app混合打包APP
qq_43828749的博客
01-22 551
最近拿到一个app项目是使用quasar 写的，quasar 是一个国外的框架不太懂不过他也是基于vue的框架，使用webpack的脚手架，百度使用quasar 如何打包都是要配合android studio想了想又要搞很多配置还是使用uniapp的打包把比较方便。删除新建的项目中的文件 只保留manifest.json，然后把第一步打包的东西都移动到这个项目中，配置一下manifest.json 里面的东西，如图标软件名称等，配置好了直接先使用在线云打包。
Vue + quasar-framework进行Vue混合app开发 ─ 环境准备(一)
寻梦无痕
10-24 1万+
这几天有空闲时间去网上找了找vue的相关的ui框架，看到有网友推荐quasar-framework，去它官网看了下，然后看到了Hybrid Mobile Apps (that look native,意思就是混合移动应用程序，这不就是混合app吗，还是基于Vue的，仔细看了下支持的东西还挺多单页面应用、SSR服务器渲染、渐进式Web、混合app开发、Electron Apps开发（桌面应用），乖乖...
quasar-demo-app
04-11
类星体应用（quasar-demo-app） Quasar Framework应用 安装依赖项 npm install 在开发模式下启动应用程序（热代码重新加载，错误报告等） quasar dev 整理文件 npm run lint 构建用于生产的应用 quasar build ...
Vue + quasar-framework进行Vue混合app开发 ─ Cordova插件调用(二)
寻梦无痕
11-10 1万+
开发一个App，怎么能不调用原生的api接口呢，在Quasar中我们可以直接安装并使用Cordova插件调用原生设备API，比如获取设备信息，网络信息，调用摄像头等等。 Cordova插件只有在deviceready事件被触发后才可用。 我们不需要担心太多。 在这个事件被触发之后，Quasar监听这个事件并且处理我们的根Vue组件。但是如果你需要一些插件自己的变量并且在deviceready之后初...
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
:rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新Quasar版本的能力，您应该使用Quasar CLI ...
quasar-pak::package:打包Quasar Electron应用程序安装程序
04-28
Quasar-Pak-停产 从 Electron应用轻松创建linux安装程序 安装 npm i -D quasar-pak 或者，如果您需要前沿技术： npm i -D https://github.com/ExNG/quasar-pak.git 应用图片 从Quasar Electron App创建一个AppImage文件。 var pak = require ( 'quasar-pak' ) var path = require ( 'path' ) pak . appimage ( { // Your package.json file, location of the the script assumes to be in a script folder package : require ( '../package.json' ) , // Dist is wh
quasar搭建，运行，打包
三巧的博客
04-20 1816
quasar搭建，运行，打包
Vue + quasar-framework进行Vue混合app开发 ─ 模拟器选择及使用(四)
寻梦无痕
11-10 8179
这里推荐2钟比较常用的模拟器，Genymotion和Android Studio自带的Android Virtual Device，至于喜欢用哪个就用哪个。 Genymotion 需要准备下载的软件 VirtualBox：点击下载 Genymotion：点击下载（下载需要登录，所以先注册个账号，后面使用的时候也需要登录） 安装过程省略，自己搞定 VirtualBox Genymotion 点击...
Quasar 简单使用
热门推荐
yuhaifei_123的博客
04-24 1万+
错误提示 添加布局代码` <!-- 服务器IP --> <div class="width-1of1 clearfix"> <div><label><span class="red">*</sp
Quasar framework 命令大全
qq_40188879的博客
12-12 679
Quasar framework 命令大全 创建 layout : quasar new layout xxx 创建page quasar new page xxx
java 协程 quasar 从原理到代码应用
简单，坚持
11-30 1万+
简介 java开发对线程都不陌生，一个进程可以产生许多线程，每个线程有自己的上下文，但是每个线程也都有自己的消耗，所以线程的资源是有限的，尤其是将多个阻塞操作拆分为多个线程的做法，就是的多个线程在空耗，浪费了服务器的性能，这就是协程适用的场景。 协程，其实就是在一个线程中，有一个总调度器，对于多个任务，同时只有一个任务在执行，但是一旦该任务进入阻塞态，则将该任务设置为挂起，运行其他任务，在运行...
继续了解Java的纤程库 – Quasar
java的平凡之路
05-25 6467
前一篇文章Java中的纤程库 – Quasar中我做了简单的介绍，现在进一步介绍这个纤程库。Quasar还没有得到广泛的应用，搜寻整个github也就pinterest/quasar-thrift这么一个像样的使用Quasar的库，并且官方的文档也很简陋，很多地方并没有详细的介绍，和Maven的集成也不是很好。这些都限制了Quasar的进一步发展。但是，作为目前最好用的Java coroutine...
使用Quasar设计Material和IOS风格的响应式网站
weixin_34217711的博客
02-28 497
GITHUB：使用Quasar设计旅游网站文章链接：使用Quasar设计Material和IOS风格的响应式网站 Quasar Quasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。 以下内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值