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