文章目录
-
- 一、背景说明
- 二、Quasar环境的搭建
- 三、如何创建Quasar项目
-
- 3.1、初始化应用
- 3.2、启动Quasar应用
- 四、问题
-
- 4.1、如何升级nodejs
- 4.2、为什么通过手机浏览器访问Quasar应用报连接超时?
- 五、总结
一、背景说明
为什么要将 “如何使用Quasar创建应用” 单独整理成一篇文章呢?
因为这个功能在实际开发中使用非常频繁,虽然不复杂,但是却非常重要,尤其是第一次搭建环境时非常容易踩坑。本篇忠实记录了我环境搭建和应用创建过程中遇到了哪些问题,以及是如何解决这些问题的。
相关环境如下:
- 操作系统:win 10 专业版
- node版本:16(升级前版本)
- Vue版本:3.4.20
- Quasar版本:v2.14.5
二、Quasar环境的搭建
关于Quasar这里有一段使用要求:
我本机的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
产品描述:
Vue组件的风格,我选择:组合式API
CSS预处理器,则选择了:Sass with SCSS syntax
。具体是什么,也不是太清楚。
项目组件,我选择了图中几种。因为没有国际化的需求,没有勾选Vue-i18n。
ESLint的规则选择了第一个:
Standard据说是严格模式,还是选择好用一点的Prettier。
此时回车后,就会生成项目文件和目录:
提示安装项目依赖:
选择是。安装好后,界面信息如下:
3.2、启动Quasar应用
执行如下命令,可以启动当前Quasar应用:
cd myclass-web
quasar dev
应用启动成功后,如上图所示。可以在浏览器中通过如下地址进行访问:
但是,在通过手机浏览器访问该Quasar应用时,连接超时了。结果把防火墙关闭后,就可以访问了。但是奇怪的是,我在防火墙中添加了入站规则后,仍然会连接超时。
关于该问题暂时不纠结,因为在本地浏览器是可以正常访问新建应用的。
第二天正好有空,所以研究了一下为什么手机浏览器访问不了Quasar应用的问题,相关过程和处理方法请看:问题4.2
。
四、问题
4.1、如何升级nodejs
升级nodejs,但是又不希望升级到最新版本,可以访问如下地址:
这里有nodejs的版本和其对应的npm版本:
选一个相对稳定的版本:v18.19.1
。进入其release目录:
选 node-v18.19.1-x64.msi
。然后进行傻瓜式安装。
此时,我有一个疑问:
新的安装是否会影响之前的个性化设置(npm的本地仓库、缓存目录)呢?
执行验证脚本:
C:\Windows\system32>node -v
v18.19.1
C:\Windows\system32>npm -v
10.2.4
发现版本已经升级。接着人工检查之前的设置。
万幸的是,如下设置没有丢失:
这一切应当归功于NODE_PATH
环境变量的设置。
因为新的安装会追加数据到环境变量PATH(环境变量-用户变量中的PATH
),所以需要对其进行删除:C:\Users\用户名\AppData\Roaming\npm
4.2、为什么通过手机浏览器访问Quasar应用报连接超时?
问题描述:
我挠破头都想不出是什么原因。但从现象上看,似乎问题就出在防火墙上:因为将其关闭,Quasar应用就可以访问。并且在防火墙中设置的 入站规则 也没有生效。
出现转机:
在查看防火墙时,发现如下情况:
出于安全考虑,防火墙是坚决不允许关闭的。
但是作为一个典型的强迫症患者,我还是打算将连接的WIFI
改成专用网络。方法如下:
无心插柳:
本来只是一个无心之举,但是当我在手机上再次访问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的安装