[前端] 如何使用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+版本了。
quasar脚手架安装报错

关于如何升级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 软件包,按回车确认。(这个提示是否只出现于第一次初始化应用?)
问题2
第二个问题是:你将要创建什么?默认选了 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版本:
nodejs版本
选一个相对稳定的版本: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

小结:

通过实践可知:

  • 如果之前迁移过npm的本地仓库、缓存目录,升级nodejs不会导致相关数据和配置丢失
  • 因为新的安装会追加数据到环境变量PATH中,所以需要删除追加的数据

 

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-cn.cn/layout-builder

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


相关文章:

Vue环境的搭建之npm的安装

  • 19
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值