文章目录
- 一、Quasar框架介绍
- 二、搭建一个简单的Quasar程序
- 1、Quasar CLI安装
- 2、创建Quasar应用程序
- 3、运行Quasar
- 三、使用Quasar开发SSR
- 四、使用Quasar开发桌面应用(Electron)
- 1、添加Quasar Electron模式
- 2、运行开发
- 五、使用Quasar移动应用(Capacitor)
- 1、下载安装AndroidStudio
- 2、添加Capacitor Quasar模式
- 3、开始开发
- 六、总结
一、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可以使用全端。
