初识Quasar框架

移动官网使用quasar的ssr打包
有诗云桌面客户端使用quasar的electron打包

Quasar 框架全解析：一站式 Vue 跨平台开发解决方案

全面了解 Quasar 框架，本文将从核心定位、核心优势、环境搭建、核心概念、多平台打包、高级特性、使用场景及优缺点等维度，系统讲解 Quasar 框架的使用与价值，帮助你掌握这一基于 Vue.js 的跨平台开发利器。

一、Quasar 核心定位

Quasar（中文译“类星体”，官网：https://quasar.dev/）是基于 Vue.js 3（也兼容 Vue 2）的开源前端框架，核心目标是实现「一次代码编写，多平台无缝部署」。它不仅提供了丰富的高质量 UI 组件库，还内置了完整的工程化工具链，支持将同一套代码打包为：

响应式网站（PC/移动端）；
PWA（渐进式网页应用）；
移动端原生 APP（Android/iOS，基于 Cordova/Capacitor）；
桌面端应用（Windows/macOS/Linux，基于 Electron）；
小程序（微信/支付宝/百度，需插件）；
SSR（服务端渲染）/SSG（静态站点生成）。

Quasar 主打“高性能、低配置、易扩展”，尤其适合快速开发跨平台应用，同时兼顾企业级项目的可维护性。

二、核心优势（为什么选择 Quasar）

1. 极致的跨平台能力

无需为不同平台编写差异化代码，Quasar 会自动适配平台特性（如移动端的触摸手势、桌面端的鼠标交互、原生 APP 的系统级权限），仅需通过少量配置即可切换打包目标。

2. 高质量的 UI 组件库

多风格自适应：组件默认适配 Material Design（安卓）和 iOS 设计规范，自动根据运行平台切换样式（如按钮、导航栏、弹窗）；
覆盖全场景：包含 100+ 组件（表单、导航、数据展示、交互反馈、布局等），无第三方依赖，组件体积小、性能优；
响应式设计：所有组件原生支持响应式，适配从手机到 4K 大屏的所有尺寸；
可定制化：支持主题定制、组件样式覆盖，无需修改源码即可适配品牌风格。

3. 强大的工程化工具链

基于 Quasar CLI 构建，内置 Webpack/Vite（可选）、ESLint、PostCSS、TypeScript 支持；
热更新、代码分割、按需加载、Tree-Shaking 等优化开箱即用；
内置 PWA、SSR、SSG 配置，无需手动配置复杂的工程化方案。

4. 性能优化原生支持

组件基于 Vue 3 的 Composition API 开发，体积小、渲染效率高；
内置懒加载、虚拟列表（QVirtualScroll）、图片优化等性能特性；
打包产物体积可控，移动端 APP 打包后体积远小于原生开发。

5. 完善的生态与文档

中文文档完善（https://quasar.dev/zh/），示例丰富；
社区活跃，提供大量插件（如状态管理、路由、i18n、图表等）；
兼容主流 Vue 生态（Vue Router、Pinia/Vuex、Axios 等）。

三、环境搭建（快速上手）

1. 前置条件

Node.js ≥ 16（推荐 LTS 版本，如 18/20）；
npm/yarn/pnpm（推荐 pnpm，速度更快）；
可选：若打包原生 APP/桌面端，需安装对应环境（如 Android Studio、Xcode、Electron 依赖）。

2. 安装 Quasar CLI

# 全局安装 Quasar CLI
npm install -g @quasar/cli

# 验证安装
quasar --version # 显示版本号即成功

3. 创建第一个 Quasar 项目

# 创建项目（交互式配置）
quasar create quasar-demo

# 进入项目目录
cd quasar-demo

# 启动开发服务器（默认开发响应式网站）
quasar dev

# 访问 http://localhost:8080 即可看到项目界面

quasar-demo/
├── quasar.config.js  # 核心配置文件（打包、插件、样式等）
├── src/
│   ├── assets/       # 静态资源（图片、字体、样式）
│   ├── components/   # 自定义组件
│   ├── layouts/      # 布局组件（全局布局）
│   ├── pages/        # 页面组件（路由对应）
│   ├── router/       # 路由配置
│   ├── stores/       # Pinia 状态管理（替代 Vuex）
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
└── public/           # 静态资源（无需打包处理）

四、核心概念与架构

1. Quasar CLI（工程化核心）

Quasar CLI 是框架的核心工具，提供以下核心命令：

命令	作用
`quasar create`	创建新项目
`quasar dev`	启动开发服务器（可指定平台：`-m pwa`/`-m electron`）
`quasar build`	打包项目（指定平台：`-m android`/`-m ios`/`-m electron`）
`quasar inspect`	查看 Webpack/Vite 配置
`quasar ext add`	安装 Quasar 插件

2. 核心配置文件：quasar.config.js

该文件是项目的全局配置入口，涵盖：

打包目标（平台、输出路径）；
样式配置（主题、全局 CSS、SCSS 变量）；
插件配置（PWA、Electron、Capacitor）；
性能优化（代码分割、压缩、CDN）；
环境变量（开发/生产环境）。

示例（配置主题色）：

// quasar.config.js
module.exports = function (ctx) {
  return {
    css: {
      // 自定义主题色（覆盖默认 Material Design 颜色）
      theme: {
        primary: '#1976D2', // 主色
        secondary: '#26A69A', // 次要色
        accent: '#9C27B0' // 强调色
      }
    }
  }
}

3. UI 组件使用（核心体验）

Quasar 组件无需手动引入，全局注册后可直接使用，示例：

<template>
  <!-- 响应式布局（Quasar 内置布局组件） -->
  <q-page class="row q-pa-md">
    <!-- 按钮组件（自适应平台样式） -->
    <q-btn 
      label="点击我" 
      color="primary" 
      icon="mdi-home" 
      @click="handleClick"
    />
    <!-- 表单组件（带验证） -->
    <q-input 
      v-model="username" 
      label="用户名" 
      placeholder="请输入用户名"
      :rules="[val => val.length > 0 || '用户名不能为空']"
    />
    <!-- 数据列表（响应式） -->
    <q-table 
      :data="tableData" 
      :columns="columns" 
      row-key="id"
      bordered
    />
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
const tableData = ref([
  { id: 1, name: 'Quasar', type: '框架' },
  { id: 2, name: 'Vue', type: '核心' }
])
const columns = ref([
  { name: 'name', label: '名称', field: 'name' },
  { name: 'type', label: '类型', field: 'type' }
])
const handleClick = () => {
  alert('Quasar 组件使用示例')
}
</script>

4. 平台检测与适配

Quasar 提供 $q.platform 全局对象，可检测当前运行平台，实现差异化逻辑：

<template>
  <div>
    <!-- 仅在移动端显示 -->
    <div v-if="$q.platform.is.mobile">移动端专属内容</div>
    <!-- 仅在桌面端显示 -->
    <div v-if="$q.platform.is.desktop">桌面端专属内容</div>
    <!-- 区分 Android/iOS -->
    <div v-if="$q.platform.is.android">Android 样式</div>
    <div v-if="$q.platform.is.ios">iOS 样式</div>
  </div>
</template>

<script setup>
// 脚本中使用
import { useQuasar } from 'quasar'
const $q = useQuasar()
console.log('当前平台：', $q.platform.is)
</script>

五、多平台打包能力（Quasar 核心卖点）

1. 打包为响应式网站（默认）

# 开发模式
quasar dev

# 打包生产环境
quasar build
# 输出目录：dist/spa

2. 打包为 PWA（渐进式网页应用）

# 安装 PWA 插件（首次使用）
quasar ext add @quasar/pwa

# 开发 PWA
quasar dev -m pwa

# 打包 PWA
quasar build -m pwa
# 输出目录：dist/pwa

Quasar 自动生成 Service Worker、Manifest 文件，支持离线缓存、添加到主屏幕等 PWA 特性。

3. 打包为桌面端应用（Electron）

# 安装 Electron 插件
quasar ext add @quasar/electron

# 开发桌面端
quasar dev -m electron

# 打包桌面端（Windows/macOS/Linux）
quasar build -m electron
# 输出目录：dist/electron

支持桌面端特性：系统托盘、窗口控制、文件系统访问、快捷键等。

4. 打包为移动端原生 APP（Capacitor/Cordova）

（1）基于 Capacitor（推荐）

# 安装 Capacitor 插件
quasar ext add @quasar/capacitor

# 初始化移动端项目
quasar capacitor add android # 安卓
# 或 quasar capacitor add ios # iOS（需 macOS 系统）

# 开发移动端（连接真机/模拟器）
quasar dev -m capacitor -T android

# 打包原生 APP
quasar build -m capacitor -T android
# 输出目录：dist/capacitor

（2）基于 Cordova（兼容旧项目）

1
2
3

quasar ext add @quasar/cordova
quasar cordova add android
quasar build -m cordova -T android

5. 打包为 SSR/SSG（服务端渲染/静态站点生成）

# SSR 开发/打包
quasar dev -m ssr
quasar build -m ssr

# SSG 开发/打包
quasar dev -m ssg
quasar build -m ssg

SSG 适合博客、文档类站点，SSR 适合需要 SEO/首屏加载优化的站点。

六、高级特性

1. 状态管理（Pinia 优先）

Quasar 推荐使用 Vue 3 官方的 Pinia 替代 Vuex，内置 Pinia 支持：

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

在组件中使用：

<script setup>
import { useCounterStore } from 'src/stores/counter'
const counterStore = useCounterStore()
</script>

<template>
  <q-btn @click="counterStore.increment" label="Count: {{ counterStore.count }}" />
</template>

2. 国际化（i18n）

Quasar 内置 quasar-i18n 插件，支持多语言切换：

1 2	`# 安装插件 quasar ext add i18n`

配置多语言文件后，可通过 $t() 全局方法实现文本国际化：

<template>
  <div>{{ $t('hello') }}</div>
  <q-btn @click="setLang('zh-CN')" label="切换中文" />
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t, setLocaleMessage, locale } = useI18n()
const setLang = (lang) => {
  locale.value = lang
}
</script>

3. 主题定制

Quasar 支持两种主题定制方式：

全局变量覆盖：修改 quasar.config.js 中的 css.theme；

SCSS 变量覆盖：创建 src/css/quasar.variables.scss，覆盖内置 SCSS 变量：

// src/css/quasar.variables.scss
$primary: #FF5722; // 覆盖主色
$secondary: #607D8B; // 覆盖次要色
$font-size-base: 14px; // 覆盖基础字体大小

4. 插件扩展

Quasar 提供丰富的官方/社区插件，如：

@quasar/echarts：图表插件；
@quasar/vue-composition-api：Vue 3 组合式 API 支持；
@quasar/auth：认证插件（登录/权限）。

安装插件：

1	`quasar ext add @quasar/echarts`

七、实际使用场景

1. 适合的场景

企业后台管理系统：组件丰富，快速搭建响应式后台；
跨平台应用：需要同时支持 Web/移动端/桌面端的应用（如工具类 APP、轻量级办公软件）；
PWA 应用：无需原生开发，快速实现离线可用、添加到主屏幕的网页应用；
原型/快速开发：CLI 工具链完善，组件开箱即用，缩短开发周期；
中小型项目：无需额外整合第三方组件库，降低依赖管理成本。

2. 不适合的场景

极致定制化的 UI：Quasar 组件样式定制成本高于原生 Vue + 自定义 CSS；
超大型单页应用：虽然支持代码分割，但框架本身有一定体积，需额外做性能优化；
纯原生体验的 APP：Quasar 打包的原生 APP 基于 WebView，性能略低于 Flutter/React Native/原生开发。

八、优缺点分析

1. 优点

跨平台能力强，一套代码多端部署，大幅降低开发成本；
UI 组件质量高，适配多平台设计规范，无需重复开发；
工程化工具链完善，开箱即用，无需手动配置；
文档完善，中文支持好，学习成本低；
基于 Vue.js，Vue 开发者可快速上手。

2. 缺点

框架封装较深，自定义底层配置（如 Webpack）需学习 Quasar 特有语法；
原生 APP 性能略低于 Flutter/React Native（基于 WebView）；
社区规模小于 Vue/React 生态，部分小众需求需自行开发；
升级成本：Quasar 2（Vue 3）与 Quasar 1（Vue 2）存在一定兼容性差异。

九、学习资源与生态

1. 官方资源

官网：https://quasar.dev/
中文文档：https://quasar.dev/zh/
GitHub：https://github.com/quasarframework/quasar
示例项目：https://github.com/quasarframework/quasar-examples

2. 社区资源

Quasar 中文社区：https://forum.quasar.dev/c/zh-CN/
B 站/YouTube 教程：大量快速上手、实战项目教程；
npm 生态：https://www.npmjs.com/search?q=quasar

总结

关键点回顾

Quasar 是基于 Vue.js 的跨平台框架，核心价值是「一次开发，多端部署」，支持 Web/PWA/移动端/桌面端；
核心优势是高质量的 UI 组件库、完善的工程化工具链、低学习成本；
适合快速开发中小型跨平台应用、企业后台、PWA 应用，不适合极致原生体验的 APP；
开发流程：环境搭建 → 项目创建 → 组件开发 → 平台适配 → 多端打包。

Quasar 是 Vue 生态中跨平台开发的优质选择，尤其适合追求开发效率、需要快速覆盖多平台的项目，是中小型团队降低跨平台开发成本的首选框架之一。

初识Quasar框架

https://cszy.top/20201215-vue-quasar/

作者

csorz

发布于

2020年12月15日

许可协议

20201218-node-puppeteer 上一篇

PWA DEMO 下一篇

初识Quasar框架

Quasar 框架全解析：一站式 Vue 跨平台开发解决方案

一、Quasar 核心定位

二、核心优势（为什么选择 Quasar）

1. 极致的跨平台能力

2. 高质量的 UI 组件库

3. 强大的工程化工具链

4. 性能优化原生支持

5. 完善的生态与文档

三、环境搭建（快速上手）

1. 前置条件

2. 安装 Quasar CLI

3. 创建第一个 Quasar 项目

4. 项目目录结构（核心目录）

四、核心概念与架构

1. Quasar CLI（工程化核心）

2. 核心配置文件：quasar.config.js

3. UI 组件使用（核心体验）

4. 平台检测与适配

五、多平台打包能力（Quasar 核心卖点）

1. 打包为响应式网站（默认）

2. 打包为 PWA（渐进式网页应用）

3. 打包为桌面端应用（Electron）

4. 打包为移动端原生 APP（Capacitor/Cordova）

（1）基于 Capacitor（推荐）

（2）基于 Cordova（兼容旧项目）

5. 打包为 SSR/SSG（服务端渲染/静态站点生成）

六、高级特性

1. 状态管理（Pinia 优先）

2. 国际化（i18n）

3. 主题定制

4. 插件扩展

七、实际使用场景

1. 适合的场景

2. 不适合的场景

八、优缺点分析

1. 优点

2. 缺点

九、学习资源与生态

1. 官方资源

2. 社区资源

总结

关键点回顾