今天介绍前端样式库vue+Quasar 简直YYDS,不接受反驳~

3,809 阅读2分钟

这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战

Quasar(发音为/ˈkweɪ.zɑɹ/)是基于MIT许可的开源Vue.js框架,Web开发人员可以快速创建具有多种功能的响应式++网站/应用程序,其运用范围包括

Quasar简介

quasar官网 www.quasarchs.com/introductio…

  • SPA(单页应用程序)
  • SSR(服务器端渲染应用程序)(+可选的PWA客户端接管)
  • BEX(浏览器扩展)
  • 移动应用(Android,iOS等)
  • 多平台桌面应用程序(使用Electron) Quasar最大的有点在于它支持PWA开发,多端,写一套代码可以适配多端()实际在尺寸相差比较大的屏幕只需要少部分修改就可以实现多端。文档特别全面哦,nice~ Quasar的座右铭是:一站式所有平台,即一次性编写代码,并同时将其部署为网站,移动应用程序和应用程序。 一个适用于所有代码的代码库,可通过Quasar Web复用组件,会帮助您在创纪录的时间内开发应用程序.

Quasar安装

图片.png

图片.png

Quasar支持以下开发模式

  • UMD/Standalone(通过CDN嵌入现有项目,逐步整合)
  • Quasar CLI(免费的高级开发者体验,推荐)
  • Vue CLI 3 plugin

这里介绍Quasar CLI模式,其他模式请查看Quasar官网。

安装 Quasar CLI

可以通过yarn 或 npm 安装

 yarn global add @quasar/cli

或者

npm install -g @quasar/cli
  • 创建应用

可以通过如下命令创建项目

quasar create <folder_name>

PWA

quasar dev -m pwa

手机应用

quasar dev -m cordova -T [android|ios]

或更短的格式:

quasar dev -m [android|ios]

Electron应用

quasar dev -m electron

Github

  1. 响应式网站

  2. 渐进式应用

  3. 手机应用(通过Cordova)

  4. 跨平台应用(通过Electron)

Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App 在使用Quasar的时候, 你甚至不需要Hammerjs, Momentjs, 或者Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到。

Quasar学习视屏推荐

(纯英文的哦)不过那又怎么样,拿来把你~

  1. 第一部分:www.bilibili.com/video/BV1py…
  2. 第二部分:www.bilibili.com/video/BV14h…
  3. 第三部分:www.bilibili.com/video/BV1kV…  
  4. PWA  www.bilibili.com/video/BV1DK…

前端路漫漫其修远兮,吾将上下而求索,一起加油,学习前端吧

欢迎留言讨论~