一、 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，回车

成功啦！

vue+quasar开发移动app-搭建项目相关推荐

Babylonjs入门02——VsCode+vue+babylonjs开发第一个babylon项目程序
Babylonjs入门02--VsCode+vue+babylonjs开发第一个babylon项目程序 1 环境搭建 2 创建vue项目 3 基于vue项目写第一个babylon项目 4 下一期再见 ...
从零开发H5可视化搭建项目
小册介绍在当下业务需求迭代飞快的互联网环境下,如何助力业务,为业务快速试错.迭代提供基础支持是不可规避的挑战之一.这其中最重要的一环就是"快".有的时候为了满足业务诉求,我们不得 ...
WEB前端 vue学习一使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...
Vue脚手架3.0快速搭建项目
安装前的准备工作 node -v or npm -v //检测node是否安装过 cnpm -v //检测cnpm是否安装更改国内淘宝镜像,速度更快一写 npm install cnpm -g -- ...
python制作安卓app_python开发安卓App实战项目：西瓜视频解析工具
python要开发app就要用到kivy的模块,关于kivy开发环境的安装网上非常多,就不多说了. 整个开发过程主要涉及布局和事件两个方面,首先是关于布局方面 [Python] 纯文本查看复制代码 ...
python安卓开发视频_python开发安卓App实战项目：西瓜视频解析工具
[Python] 纯文本查看复制代码import os import base64 from kivy.app import App from kivy.network.urlrequest imp ...
vue中h5页面的搭建
在工作中可能会遇到h5页面的搭建,本篇文章主要讲解如何从零开始搭建一个vue项目,实现h5页面的适配,浏览器默认样式的清除,路由的配置,项目的打包等,那就让我们开始学习吧. 如果大家只是需要一个完整的 ...
小说app搭建—小说app运营选择付费模式还是免费模式？
近年来,小说app搭建项目深受创业者的喜爱,从小说app搭建到上线运营,简单但也不易,需要创业者的坚持.虽说现在是知识付费的时代,但是资本家们为了获取更多的资源,煞费苦心的向大众推出了小说app免费阅 ...
[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...

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