为什么捐赠
API 浏览器
联系站长
Quasar CLI

简介

Quasar CLI 是我们引以为傲的脚手架工具，它提供了完整的开发体验，让您可以轻松构建各种类型的应用：

  • SPA (Single Page App，单页应用)
  • SSR (Server-side Rendered App，服务端渲染) (可与 PWA 同时存在)
  • PWA (Progressive Web App，渐进式 Web 应用)
  • BEX (Browser Extension，浏览器插件)
  • 移动应用 (Android, iOS, …) 通过 Cordova 或 Capacitor 构建
  • 桌面应用 (使用 Electron 构建的跨平台应用)

在线体验

您可以直接在浏览器中在线体验 Quasar CLI，无需安装任何内容！它提供了完整的命令行环境，几乎与本地开发体验相同。

安装

环境要求

  • Node.js v22+
  • 推荐使用 PNPM v11+，也支持 Yarn v1 (classic)、NPM 或 Bun
pnpm add -g @quasar/cli
pnpm create quasar@latest

选择 App with Quasar CLI。

创建项目

环境要求

  • Node.js v22+
  • 推荐使用 PNPM v11+，也支持 Yarn v1 (classic)、NPM 或 Bun

  1. 创建一个 Quasar 应用：

    pnpm create quasar@latest

    TIP

    系统可能会提示你确认安装 create-quasar 包，按回车键确认即可。

  2. 选择 App with Quasar CLI 选项。

  3. 回答剩余的问题，就快完成了。

  4. 你想直接运行 Quasar CLI 命令（如 quasar dev/build）还是通过包管理器运行（如 $ pnpm quasar dev/build 或 npx quasar dev/build）？

    我们强烈建议选择第一种方式，直接运行命令。实际上，你还能做更多事情（如 “quasar upgrade” 或 “quasar serve” 命令）。为此，你需要全局安装 @quasar/cli 包：

    pnpm add -g @quasar/cli

    TIP

    如果你使用 Yarn，请确保 Yarn 的全局安装路径在你的 PATH 中： 

    # 在 ~/.bashrc 或等效文件中
export PATH="$(yarn global bin):$PATH"

# fish-shell:
set -U fish_user_paths (yarn global bin) $fish_user_paths

    Windows 下，修改用户的 PATH 环境变量。如果使用 Yarn 则添加 `%LOCALAPPDATA%\yarn\bin`，如果使用 NPM 则添加 `%APPDATA%\npm`。
    或者在终端中输入以下命令快速设置： 
    # 如果使用 Yarn：
setx path "%path%;%LocalAppData%\yarn\bin"

# 如果使用 NPM：
setx path "%path%;%AppData%\npm"

    WSL2

    微软推荐的 WSL2 中的 Node.js 开发环境设置。

    使用 WSL2 时，微软建议将文件保存在 Linux 文件系统中以获得最佳性能。如果项目文件在 Windows 挂载目录而非本地 Linux 文件系统中，构建速度会慢约 3 倍，且 HMR（热模块重载）可能无法正常工作。基于 Docker for Windows 的开发环境也是如此。

Quasar CLI 工作原理

Quasar CLI (@quasar/cli) 与 @quasar/app-vite 协同工作。前者是可选的（但强烈推荐），允许你直接运行 Quasar CLI 命令以及其他有用的命令，如 quasar upgrade（无缝升级 Quasar 包）或 quasar serve（用临时 Web 服务器提供你的构建产物）。后者是核心（运行重要命令 - dev、build、inspect、info、describe 等），它会被安装到每个 Quasar 项目目录中。

不使用全局 @quasar/cli

如果你不想依赖全局安装的 @quasar/cli 包，也可以直接运行 Quasar CLI 命令。实际上是 @quasar/app-vite（每个项目目录特有的）在运行所有 CLI 命令。

以下是可选方式：

  1. 你可以在 package.json 中编写脚本来运行 Quasar 命令。

    /package.json
    "scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}

    上述配置允许你无需全局安装 @quasar/cli 即可运行脚本：

    运行脚本
    pnpm run dev
pnpm run build
# ..等等

  2. 或者，你可以通过包管理器直接运行 Quasar CLI 命令：

    pnpm quasar dev
pnpm quasar inspect
# ..等等

下一步

浏览组件
发现错误？在浏览器中编辑此页
1. Introduction
2. 简介
3. 在线体验
4. 安装
5. 创建项目
6. Quasar CLI 工作原理
7. 下一步