Quasar Framework初体验：安装使用学习记录

吐个槽

前段时间，接触到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