前言
Quasar-Framework 是一款基于vue.js开发的开源的前端框架,它能帮助web开发者快速创建以下网站:
1、响应式网站
2、渐进式应用
3、手机应用(通过Cordova)
4、跨平台应用(通过Electron)
简单说就是: Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App ,在使用Quasar的时候, 你甚至不需要 Momentjs, Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到。
下面进入主题
一、简单入门
1、首先进行quasar安装
官网是推荐yarn形式安装,这里我们也用yarn安装.
具体如何进行yarn安装和yarn的详细用法可以查看https://www.jianshu.com/p/acec6ef575da
,这里不展开详细说明。
2、quasar-cli 安装
yarn global add quasar-cli // 全局安装
注(PS):
保证电脑已经安装了Node.js ,Node.js >=8.9.0是必须的。
3、项目初始化
quasar init <项目名称> // 注意项目名称最好是中文
安装过程:
生成项目的目录结构:
4、启动项目
quasar dev // 运行 (使用默认主题)
// quasar默认包含了2套皮肤,可以任意切换,区别不是特别的大
quasar dev -t mat
quasar dev -t ios
// 运行在特定端口
quasar dev -p 8086
浏览器打开页面:
二、混合App开发
前言:
Cordova是一款移动APP开发框架,软件程序员能够使用CSS3,HTML5和JavaScript为移动设备构建应用程序,而不是依赖特定平台的API,如Android,iOS或Windows Phone中的API 。它可以根据设备的平台来包装CSS,HTML和JavaScript代码
1、准备工作
1、安装
第一步是确保安装了Cordova CLI和必要的SDK
yarn global add cordova
第二步:
Java JDK安装
https://www.jianshu.com/writer#/notebooks/31368424/notes/36861663
Android Studio安装
https://www.jianshu.com/p/f8356b793b89
2、添加Cordova的quasar模式
quasar mode -a cordova
可以进行验证
cd src-cordova
cordova requirements
3、手机USB连接电脑
手机连接电脑后,打开手机的开发者模式,将USB调试功能打开
手机连接WIFI,保持和电脑处于同一个网段内
如果电脑插的是网线,没有WIFI的话,可以手机在移动网络共享里面打开USB共享网络
// 运行
quasar dev -m cordova -T [ios|android]
// 使用一个选定的Quasary主题(iOS平台下):
quasar dev -m cordova -T ios -t ios
// 使用特定的模拟器
quasar dev -m cordova -T android -e iPhone-7
注(PS):
最下面会出现2个ip让你选择,一个是你电脑的IP,一个是手机的IP,选择手机ip.
出现LAUNCH SUCCESS 说明成功了。