文章目录
一、Quasar框架介绍
Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架,允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用:
- SPAs (单页应用)
- SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
- PWA(渐进式网页应用)
- BEX (浏览器扩展)
- 通过Cordova或Capacitor构建移动APP(Android、iOS…)
- 多平台桌面应用(使用Electron)
官方文档
中文 | 英文 |
---|---|
http://www.quasarchs.com/ | https://quasar.dev/ |
二、搭建一个简单的Quasar程序
Quasar的搭建有4种方式这里只使用的是脚手架,官方也是推荐使用。
差异:
1、Quasar CLI安装
推荐使用yarn方式,yarn没有安装请自行百度
$ yarn global add @quasar/cli
$ yarn create quasar
# or:
$ npm i -g @quasar/cli
$ npm init quasar
# or:
$ pnpm add -g @quasar/cli # experimental support
$ pnpm create quasar # experimental support
2、创建Quasar应用程序
$ yarn create quasar
根据自己的技术栈选择
我这里使用的是vue3+ts+vite
项目结构如下
3、运行Quasar
quasar dev
到此简单的quasar程序就搭建好了
三、使用Quasar开发SSR
SSR(Server Side Render)即 服务端渲染。
不理解的可以看我另外一个博客:https://blog.csdn.net/qq_43548590/article/details/127788598
为了开发或建立SSR网站,我们首先需要在我们的Quasar项目中添加SSR模式:
quasar mode add ssr
如果你想直接进入并开始开发,你可以跳过“quasar mode”命令并发出:
quasar dev -m ssr
这将自动添加PWA模式(如果没有的话)。
一个新文件夹将出现在您的项目文件夹中(在[SSR配置]](/quasar-cli-webpack/developing-ssr/configuring-ssr)页面上有详细说明):
dev运行之后查看源码
页面内容显示出来则证明ssr启动成功 。
普通的spa模式则只会显示
四、使用Quasar开发桌面应用(Electron)
Electron(原名Atom Shell)是Cheng Zhao开发的一个开源框架,现在由GitHub开发。 它允许使用最初为Web应用程序开发的前端和后端组件开发桌面GUI应用程序:后端的Node.js运行时和前端的Chromium。 Electron是几个着名的开源项目背后的主要GUI框架,包括GitHub的Atom、微软的Visual Studio Code源代码编辑器、Tidal音乐流服务桌面应用、Light Table IDE以及用于Discord聊天服务的免费桌面客户端。
1、添加Quasar Electron模式
quasar mode add electron
如果您想直接进入并开始开发,可以使用“quasar mode”命令跳过上一步并发出:
$ quasar dev -m electron
# 给底层的“cordova”可执行文件
# 传递额外的参数和/或选项:
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# 在Windows上使用Powershell时:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox
踩坑日记
这里可能会出现electron下载不下来的问题。需要手动式喊出node_modules中electron包 用yarn add electron或者npm install electron下载
2、运行开发
如果您想直接进入并开始开发,可以使用“quasar mode”命令跳过上一步并发出:
$ quasar dev -m electron
# 给底层的“cordova”可执行文件
# 传递额外的参数和/或选项:
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# 在Windows上使用Powershell时:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox
运行效果如下:
五、使用Quasar移动应用(Capacitor)
Capacitor是一个将Web应用程序部署到移动设备的跨平台的原生运行时。 它由Ionic维护,是Cordova的现代继承者。 它支持大多数(但不是全部)Cordova插件以及特定于Capacitor的插件(称为API)。 它以JavaScript模块的形式公开原生设备API。
此处只显示Android。Apple开发也是如此修改一下运行命令即可。原因没钱没Mac。呜呜呜~~~~
1、下载安装AndroidStudio
下载Android Studio网址:
官网:www.Android.com
中国大陆版网站:
https://developer.android.google.cn/
将Android安装路径添加到您的PATH:
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"
2、添加Capacitor Quasar模式
为了开发/构建移动APP,我们需要将Capacitor模式添加到我们的Quasar项目中。 它所做的是使用Capacitor CLI在/src-capacitor文件夹中生成一个Capacitor项目。
quasar mode add capacitor
3、开始开发
要使用HMR启动开发服务器,请运行以下命令:
quasar dev -m capacitor -T [android|ios]
此时会唤起AndroidStudio
踩坑日志
如果是第一次安装Android studio 需要给模拟器配置网络不然就会出现Webpage not available错误
六、总结
Quasar由于开箱即用的简单性和强大功能,Quasar的CLI具有丰富的功能。拥有丰富的组件库便于开发。大大提高了开发效率及成本。一套UI可以使用全端。