吐个槽
前段时间,接触到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
值得一提的是,上图的选项,选择auto import
后,在/quasar.conf.js
里添加的,components
和 directives
引用,就不用再自己去添加了,但是plugins
依然是要自己添加的,如下图:
此处,如何配置Quasar附带的自定义的Vue指令或Component或Plugins,请查阅:Using Quasar Directives 、 Using Quasar Components、Using Quasar Plugins
quasar dev
如果你在package.json里添加了其他的包依赖,那么,你需要先npm install
安装依赖
然后,运行:quasar dev
当你在vs code的 Terminal 中执行quasar dev
时,会报错:
此时,可以执行如下:Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process
这个不是全局的设置,所以,每次关闭项目后再次打开,可能需要重新运行它。
之后,就能正常使用quasar dev
来启动本地运行了。
顺便提一下,Configure VS Code 这个文档里关于vs code 的配置,是开发quasar时很有用的,避免很多看起来奇奇怪怪的报错。
配置quasar.conf.js
Webpack devServer选项
开发过程中,需要配置后端接口服务器:
quasar build:
Example setting env for dev/build
根据开发或生产构建类型,来配置访问地址:
样式布局
Quasar提供了段落字体:Typography,其中包含一些字体格式的样式类,可以直接使用。
Quasar提供了多种开箱即用的颜色:Color Palette。
布局方面,可以直接使用 QLayout组件,用于管理整个窗口并使用导航栏或抽屉等元素包装页面内容。可以直接显示搭建布局,并导出代码,非常方便。
Quasar中,可以直接使用一些CSS类来实现常见功能,例如:CSS可见性、CSS Positioning Classes、CSS 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。