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

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

 成功啦！