4

吐个槽

前段时间,接触到Quasar Framework 并使用了两周。一开始刚刚用Quasar的时候,因为时间紧急,没有系统的去看全部的文档,只是根据UI设计的效果图,去找类似的组件,然后再改造。一开始,真的是有种云遮雾罩的感觉,整个人都是懵逼的,看着文档,各种组件的API的解释说明和示例,用起来总觉得怪怪的。

Quasar CLI安装并创建项目

废话不多说,开始记录Quasar的学习使用的过程吧。
Getting Started - Pick a Quasar Flavour,从文档中能看到,Quasar有三种使用方法:
UMD/Standalone
Quasar CLI
Vue CLI 3 plugin

我选择Quasar CLI安装,确认自己的 Node >=10 和 NPM >=5 版本满足要求后,直接按照文档,执行:
npm install -g @quasar/cli

然后,使用Quasar CLI创建一个项目文件夹:
quasar create demo

quasar cli 创建-选择自动导入.png

值得一提的是,上图的选项,选择auto import后,在/quasar.conf.js里添加的,components 和 directives引用,就不用再自己去添加了,但是plugins 依然是要自己添加的,如下图:
quasar cli 创建-选择自动导入 后此处不用再写.png

此处,如何配置Quasar附带的自定义的Vue指令或Component或Plugins,请查阅:Using Quasar DirectivesUsing Quasar ComponentsUsing Quasar Plugins

quasar dev

如果你在package.json里添加了其他的包依赖,那么,你需要先
npm install 安装依赖

然后,运行:
quasar dev

当你在vs code的 Terminal 中执行quasar dev时,会报错:
quasar dev 在vs code中报错.png

此时,可以执行如下:
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process
这个不是全局的设置,所以,每次关闭项目后再次打开,可能需要重新运行它。
之后,就能正常使用quasar dev来启动本地运行了。
quasar dev 在vs code中执行.png

顺便提一下,Configure VS Code 这个文档里关于vs code 的配置,是开发quasar时很有用的,避免很多看起来奇奇怪怪的报错。

配置quasar.conf.js

Webpack devServer选项
开发过程中,需要配置后端接口服务器:
quasar 配置devServer .png

quasar build:
Example setting env for dev/build

根据开发或生产构建类型,来配置访问地址:
quasar 配置build .png

样式布局

Quasar提供了段落字体:Typography,其中包含一些字体格式的样式类,可以直接使用。
Quasar提供了多种开箱即用的颜色:Color Palette

布局方面,可以直接使用 QLayout组件,用于管理整个窗口并使用导航栏或抽屉等元素包装页面内容。可以直接显示搭建布局,并导出代码,非常方便。

Quasar中,可以直接使用一些CSS类来实现常见功能,例如:CSS可见性CSS Positioning ClassesCSS Shadows 等。

Quasar提供了许多CSS类来帮助您借助Flexbox轻松构建UI。有着更灵活的行列栅格布局。具体的请查阅文档:Introduction to Flexbox

文档

Quasar Framework
Getting Started - Pick a Quasar Flavour
Using Quasar Directives
Using Quasar Components
Using Quasar Plugins


北堂棣
6.6k 声望116 粉丝

2016年应届毕业生。