Quasar搭建教程初体验

一、Quasar框架介绍

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用：

• SPAs (单页应用)
• SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
• PWA（渐进式网页应用）
• BEX (浏览器扩展)
• 通过Cordova或Capacitor构建移动APP（Android、iOS…）
• 多平台桌面应用（使用Electron）

官方文档

二、搭建一个简单的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
1
2
3
4
5
6
7
8
9
10
11
12

2、创建Quasar应用程序

$ yarn create quasar
1

根据自己的技术栈选择

我这里使用的是vue3+ts+vite
项目结构如下

3、运行Quasar

quasar dev
1

到此简单的quasar程序就搭建好了

三、使用Quasar开发SSR

SSR（Server Side Render）即 服务端渲染。
不理解的可以看我另外一个博客：https://blog.csdn.net/qq_43548590/article/details/127788598

为了开发或建立SSR网站，我们首先需要在我们的Quasar项目中添加SSR模式：

quasar mode add ssr
1

如果你想直接进入并开始开发，你可以跳过“quasar mode”命令并发出：

quasar dev -m ssr
1

这将自动添加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
1

如果您想直接进入并开始开发，可以使用“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
1
2
3
4
5
6
7

踩坑日记

这里可能会出现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
1
2
3
4
5
6
7

运行效果如下：

五、使用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"
1
2
3

2、添加Capacitor Quasar模式

为了开发/构建移动APP，我们需要将Capacitor模式添加到我们的Quasar项目中。 它所做的是使用Capacitor CLI在/src-capacitor文件夹中生成一个Capacitor项目。

quasar mode add capacitor
1

3、开始开发

要使用HMR启动开发服务器，请运行以下命令：

quasar dev -m capacitor -T [android|ios]
1

此时会唤起AndroidStudio

踩坑日志

如果是第一次安装Android studio 需要给模拟器配置网络不然就会出现Webpage not available错误

六、总结

Quasar由于开箱即用的简单性和强大功能，Quasar的CLI具有丰富的功能。拥有丰富的组件库便于开发。大大提高了开发效率及成本。一套UI可以使用全端。