为什么捐赠
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+
  • 推荐使用 Yarn v1 (classic)，也支持 PNPM、NPM 或 Bun
# 使用 Yarn 安装
$ yarn global add @quasar/cli

# 或使用 NPM 安装
$ npm i -g @quasar/cli

选择 App with Quasar CLI。

创建项目

1. 初始化项目

# 使用 Yarn
$ yarn create quasar

# 或使用 NPM
$ npm init quasar

2. 选择项目类型

在命令行界面中选择 App with Quasar CLI。

3. 配置项目

根据提示选择需要的功能模块：

  • TypeScript 支持
  • ESLint 配置
  • Axios 集成
  • 其他可选模块

4. 运行项目

项目创建完成后，您可以使用以下命令：

# 开发模式
$ quasar dev

# 构建项目
$ quasar build

命令执行方式

您可以通过以下方式执行命令：

  1. 直接使用 Quasar CLI

    quasar dev
quasar build

  2. 使用 Yarn/NPM 脚本

    # 在 package.json 中添加脚本
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}

# 执行命令
yarn dev
yarn build

  3. 使用 npx

    npx quasar dev
npx quasar build

环境配置

Yarn 全局安装路径

如果您使用 Yarn，请确保将 Yarn 的全局安装路径添加到系统环境变量中：

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

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

Windows 配置

在 Windows 系统中：

  • Yarn: 添加 %LOCALAPPDATA%\yarn\bin 到 PATH
  • NPM: 添加 %APPDATA%\npm 到 PATH

WSL2 开发环境

WSL2 性能优化

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

  • 将项目文件保存在 Linux 文件系统中
  • 避免在 Windows 文件系统中开发
  • 在 Windows 文件系统中开发会导致：
    • 构建速度降低约 3 倍
    • HMR（热模块重载）可能无法正常工作 :::

Quasar CLI 工作原理

Quasar CLI 由两个主要包组成：

  1. @quasar/cli（全局包）

    • 提供命令行工具
    • 支持 quasar upgrade 等命令
    • 建议全局安装

  2. @quasar/app-vite 或 @quasar/app-webpack（本地包）

    • 包含核心功能
    • 提供 dev、build 等命令
    • 安装在项目本地

无全局安装方案

即使没有全局安装 @quasar/cli，您仍然可以通过以下方式运行命令：

  1. 使用 package.json 脚本

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

  2. 使用 Yarn

    yarn quasar dev
yarn quasar build

  3. 使用 npx

    npx quasar dev
npx quasar build

下一步

浏览 Vue 组件
发现错误？在浏览器中编辑此页
1. Introduction
2. 简介
3. 在线体验
4. 安装
5. 创建项目
5.1. 1. 初始化项目
5.2. 2. 选择项目类型
5.3. 3. 配置项目
5.4. 4. 运行项目
6. 环境配置
6.1. Yarn 全局安装路径
6.2. WSL2 开发环境
7. Quasar CLI 工作原理
7.1. 无全局安装方案
8. 下一步