[前端] 如何使用Quasar创建应用

一、背景说明

为什么要将 “如何使用Quasar创建应用” 单独整理成一篇文章呢？

因为这个功能在实际开发中使用非常频繁，虽然不复杂，但是却非常重要，尤其是第一次搭建环境时非常容易踩坑。本篇忠实记录了我环境搭建和应用创建过程中遇到了哪些问题，以及是如何解决这些问题的。

相关环境如下：

• 操作系统：win 10 专业版
• node版本：16（升级前版本）
• Vue版本：3.4.20
• Quasar版本：v2.14.5

二、Quasar环境的搭建

关于Quasar这里有一段使用要求：

• Node 12+用于Quasar CLI与Webpack，Node 14+用于Quasar CLI与Vite。
• Yarn v1（强烈推荐），PNPM，或NPM。

我本机的node是16，所以是可以使用Vite的。包管理器还是选择熟悉的npm。

那么，如何开始quasar?
安装脚手架：

npm i -g @quasar/cli

结果报错了，看来得被迫升级到18+版本了。

关于如何升级nodejs，问题列表中进行了解答。
升级nodejs后，quasar的脚手架也安装成功了！！！

三、如何创建Quasar项目

3.1、初始化应用

初始化quasar，看一下是什么效果：

npm init quasar

会出现第一个问题：

Need to install the following packages:
create-quasar@1.5.5
Ok to proceed? (y)

这是提示安装create-quasar 软件包，按回车确认。（这个提示是否只出现于第一次初始化应用？）

第二个问题是：你将要创建什么？默认选了 App with Quasar CLI。
第三个问题是：项目的目录？此时我才意识到自己执行命令之前，当前所在目录选错了，我是在C:\Windows\system32 目录下执行的上述命令。看来我必须停止。

于是我cd路径到 E:\Java\projects\myclass，重新执行命令：

npm init quasar

此时我才意识到初始化quasar，就是在使用quasar创建应用。

选择第一个，然后回车。
接下来指定项目目录的名称：myclass-web，再次回车。

再接下来是选择quasar的版本：

因为我打算使用Vue3构建应用，所以，这里选择：Quasar v2。
然后是选择脚本类型，因为Typescript的种种优点，我这里选择：Typescript。

下面需要选择使用Vite还是Webpack进行构建，我使用建议版本：Quasar App CLI with Vite 2。因为这是一个稳定版本

至于包名：就使用myclass-web（和项目目录名相同）
产品名称：Myclass App

产品描述：

An App to manage my class info.

Vue组件的风格，我选择：组合式API
CSS预处理器，则选择了：Sass with SCSS syntax。具体是什么，也不是太清楚。

项目组件，我选择了图中几种。因为没有国际化的需求，没有勾选Vue-i18n。

ESLint的规则选择了第一个：

Standard据说是严格模式，还是选择好用一点的Prettier。

此时回车后，就会生成项目文件和目录：

提示安装项目依赖：

选择是。安装好后，界面信息如下：

 

3.2、启动Quasar应用

执行如下命令，可以启动当前Quasar应用：

cd myclass-web
quasar dev

应用启动成功后，如上图所示。可以在浏览器中通过如下地址进行访问：

http://localhost:9000/

但是，在通过手机浏览器访问该Quasar应用时，连接超时了。结果把防火墙关闭后，就可以访问了。但是奇怪的是，我在防火墙中添加了入站规则后，仍然会连接超时。

关于该问题暂时不纠结，因为在本地浏览器是可以正常访问新建应用的。

 
第二天正好有空，所以研究了一下为什么手机浏览器访问不了Quasar应用的问题，相关过程和处理方法请看：问题4.2。

四、问题

4.1、如何升级nodejs

升级nodejs，但是又不希望升级到最新版本，可以访问如下地址：

https://nodejs.org/en/about/previous-releases

这里有nodejs的版本和其对应的npm版本：

选一个相对稳定的版本：v18.19.1。进入其release目录：

https://nodejs.org/download/release/v18.19.1/

选 node-v18.19.1-x64.msi。然后进行傻瓜式安装。

此时，我有一个疑问：
新的安装是否会影响之前的个性化设置（npm的本地仓库、缓存目录）呢？

执行验证脚本：

C:\Windows\system32>node -v
v18.19.1

C:\Windows\system32>npm -v
10.2.4

发现版本已经升级。接着人工检查之前的设置。

万幸的是，如下设置没有丢失：

• npm的本地仓库：node_global
• npm的本地缓存：node_cache
• npm list -global的执行结果

这一切应当归功于NODE_PATH环境变量的设置。

因为新的安装会追加数据到环境变量PATH（环境变量-用户变量中的PATH），所以需要对其进行删除：C:\Users\用户名\AppData\Roaming\npm

4.2、为什么通过手机浏览器访问Quasar应用报连接超时？

问题描述：

Quasar应用启动后，打算通过手机浏览器访问访问它。但是发现一段时间后，浏览器提示连接超时。

于是，尝试对其进行处理：首先，怀疑是端口没有放开的原因，于是在防火墙中新建了一条入站规则，允许8000端口（这里将devServer的端口由9000改为了8000）对外开放。但是，重新访问后仍然报连接超时。
 
为什么呢？难道入站规则 创建 后需要重启电脑或是防火墙？
没有找到重启防火墙的方法，于是重启了电脑，但是情况依旧。
 
但是奇怪的是：将防火墙关闭后，应用是可以访问的。

我挠破头都想不出是什么原因。但从现象上看，似乎问题就出在防火墙上：因为将其关闭，Quasar应用就可以访问。并且在防火墙中设置的 入站规则 也没有生效。

出现转机：
在查看防火墙时，发现如下情况：

• 连接的WiFi，位于活动的公用网络 中。=> 感觉有点奇怪
• 关闭专用网络的防火墙，Quasar应用依旧无法访问
• 只关闭来宾或公用网络的防火墙，Quasar应用可以访问

出于安全考虑，防火墙是坚决不允许关闭的。

但是作为一个典型的强迫症患者，我还是打算将连接的WIFI 改成专用网络。方法如下：

1、打开无线网络的属性 :

2、将其网络配置文件，由 “公用” 改为 专用：

无心插柳：
  本来只是一个无心之举，但是当我在手机上再次访问Quasar应用时，发现居然可以访问了！！！

自此，开发模式下Quasar应用无法通过手机访问的问题得到解决。

事实也证明我之前的猜测（问题出在防火墙上） 是不正确的。网络配置不正确才导致了这一问题的真正原因。

这似乎与我们的感知是非常不相符的，所以，问题的定位才不那么容易。

五、总结

本篇文章主要介绍了如何搭建UI框架Quasar的环境，并且详细讲解了如何通过脚手架创建Quasar应用。

在此过程中，遇到node版本过低的问题，说明了相关的升级方法，并讲解了如何寻找nodejs的历史版本（默认安装的是最新版本，可能不稳定），且讲解了如何查看nodejs对应的npm版本。

最后又讲了如何解决手机浏览器访问不了Quasar应用（开发模式下）的问题。

需要注意的问题有：

• 不要纠结quasar的开发模式，选择一个开始即可。我选择Quasar CLI模式（因为它功能全，并且可以使用Vite）。
• 执行npm init quasar 命令，要选择正确的路径。

相关链接：

quasar的布局生成器：
https://www.quasar-***.***/layout-builder

参考资料：
http://www.quasarchs.***/start/quasar-cli
https://blog.csdn.***/weixin_47084275/article/details/109103196

相关文章：

 Vue环境的搭建之npm的安装