Quasar框架-初步介绍

简介

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源前端框架，其概念清晰明确，风格简洁优雅，功能实用强大，组件丰富多样，操作简单方便，文档详细完善，目标宏伟远大。Quasar 框架在性能、安全、应用扩展支持、全平台支持、多语言支持、自动化测试支持等方面都有着执着的追求，鼓励遵循Web开发最佳实践，为开发人员提供了诸多开箱即用的强大功能，是一个很棒的框架。

Quasar的座右铭是：编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。使用Quasar ，可以快速创建多种类型的responsive++网站/应用：

SPAs (单页应用)
SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
PWA（渐进式网页应用）
通过Cordova或Capacitor构建移动APP（Android、iOS…）
多平台桌面应用（使用Electron）

所有这些应用都用一个代码库，通过使用Quasar提供的CLI并辅以精心编写的、性能导向的Quasar Web组件，帮助开发者以最短时间开发应用，让开发人员生活更轻松。

Quasar 官网： https://quasar.dev/
Quasar 中文文档： http://www.quasarchs.com/

Quasar CLI

Quasar开发的推荐方式是使用 Quasar CLI。使用Quasar CLI 可以在同一个项目文件夹中无缝地构建上一节提到的各种类型应用，并确保遵循最佳的Quasar实践，这一切都是开箱即用的。Quasar CLI 提供了Dev Server和开发环境开发等方面的支持。

在使用Dev Server（$ quasar dev）进行开发时：

Babel，所以你可以编写ES6代码
用于Vue SFC的Webpack + vue-loader（单个文件组件）
状态保持热重载
状态保留编译错误覆盖
使用ESLint的Lint-on-save
源地图(Source maps)
如果您定位移动应用，请在设备模拟器（或连接到您的计算机的真实手机）上进行开发
如果您定位Electron应用，则在包含开发人员工具的Electron窗口上开发
…还有很多

开发环境开发（$ quasar build）时：

使用UglifyJS缩小Javascript
用html-minifier缩小HTML
将所有组件中的CSS提取（并自动加前缀）到单个文件中并使用cssnano缩小
所有静态资源都使用版本哈希进行编译，以实现高效的长期缓存，并自动生成生产环境的index.html，并为这些生成的资源提供适当的URL。
…还有很多

Quasar CLI 安装和简单使用

# 确保您的计算机上安装了Node>=8.9和NPM>=5

$ yarn global add @quasar/cli #

或者

$ npm install -g @quasar/cli

使用Quasar CLI创建项目

$ quasar create <folder_name>

使用Quasar CLI，在这一个项目文件夹中，即可构建上一节提到的各种类型应用（默认构建的是SPA项目）。这使得从源代码开发或构建最终可分发项目非常简单。以开发或构建SPA项目为例

开发:

$ quasar dev

构建生产版本

$ quasar build

总结

由上面的介绍可以看到，Quasar CLI ，能帮助开发者缩短应用的开发时间，让开发人员生活更轻松，是一个很棒的框架。

Return

我的学习笔记分享