Quasar CLI

Quasar CLI 是 Quasar 框架的骄傲。你可以无缝构建：

¥Quasar CLI is the pride of Quasar Framework. You can seamlessly build:

SPA（单页应用/网站）
¥a SPA (Single Page Application/Website),
SSR（服务器端渲染应用/网站）
¥a SSR (Server-side Rendered App/Website),
PWA（渐进式 Web 应用）
¥a PWA (Progressive Web App),
一个 BEX（浏览器扩展），
¥a BEX (Browser Extensions),
移动应用（通过 Cordova 或 Capacitor 构建）
¥a Mobile App (through Cordova or Capacitor),
一个 Electron 应用
¥an Electron App

…在同一个项目文件夹中，确保你遵循 Quasar 的最佳实践，同时所有内容均可开箱即用。

¥…within the same project folder, ensuring you are following the best Quasar practices while everything will simply work out of the box.

在线试用 Quasar CLI(Trying Quasar CLI Online)

¥Trying Quasar CLI Online

你可以直接在浏览器中在线试用 Quasar CLI，无需安装任何东西！你还可以使用命令行，因此它与在本地创建项目几乎相同。

¥You can try Quasar CLI online directly in the browser, without installing anything! You will also be able to use the command line, so it will be almost identical to creating a project locally.

Open in Stackblitz

TL;DR(TL;DR)

要求：

Node 14+
Yarn v1（强烈推荐）、PNPM、NPM 或 Bun
¥Yarn v1 (strongly recommended), PNPM, NPM or Bun

Yarn

NPM

PNPM

Bun

$ yarn global add @quasar/cli
$ yarn create quasar

如果需要，请选择 Quasar CLI with Vite：

¥Pick Quasar CLI with Vite if you want:

更快开发服务器启动
¥Faster dev server start
更快热更新
¥Faster hot updates
更快构建
¥Faster build
卓越的 PWA、SSR 和 BEX Quasar 模式（更多功能）
¥Superior PWA, SSR and BEX Quasar modes (more features)

View Components

安装/项目脚手架(Installation / Project Scaffolding)

¥Installation / Project Scaffolding

要求：

Quasar CLI 配合 Webpack 运行 Node 12+，Quasar CLI 配合 Vite 运行 Node 14+。
¥Node 12+ for Quasar CLI with Webpack, Node 14+ for Quasar CLI with Vite.
Yarn v1（强烈推荐）、PNPM 或 NPM。
¥Yarn v1 (strongly recommended), PNPM, or NPM.

让我们创建一个 Quasar 应用：
¥Let’s create a Quasar app:
Yarn
NPM
PNPM
Bun
$ yarn create quasar
Copied to clipboard
TIP
create-quasar package, press the enter key to confirm. :::你可能会看到安装确认信息。
选择 App with Quasar CLI 选项，然后选择 Quasar v2。
¥Pick the App with Quasar CLI option then Quasar v2.
然后系统会询问你想要哪个 Quasar App CLI。你更喜欢 Vite 还是 Webpack？
¥You will then be asked which Quasar App CLI you want. Do you prefer the Vite one or the Webpack one?
提示：如果需要，请选择 "Quasar CLI 与 Vite 结合使用"：
- 更快开发服务器启动
  ¥Faster dev server start
- 更快热更新
  ¥Faster hot updates
- 更快构建
  ¥Faster build
- Superior PWA, SSR and BEX Quasar modes (more features) :::
回答完剩余问题，你就快完成了。
¥Answer the rest of the questions and you’re almost done.
现在，你想直接运行 Quasar CLI 命令（例如 $ quasar dev/build），还是通过 yarn 或 npx 运行（$ yarn quasar dev/build/npx quasar dev/build）？
¥Now, do you want to be able to run Quasar CLI commands directly (eg. $ quasar dev/build) or through yarn or npx ($ yarn quasar dev/build / npx quasar dev/build)?
我们强烈建议选择第一个选项，以便能够直接运行命令。实际上，你可以做的远不止这些（例如，“quasar 升级” 或 “quasar 服务” 命令）。为此，你需要全局安装 @quasar/cli 包：
¥We strongly recommend to pick the first choice and be able to run commands directly. Actually, you’ll be able to do even more than just this (eg. “quasar upgrade” or “quasar serve” commands). For this, you’ll need to globally install the @quasar/cli package:
Yarn
NPM
PNPM
Bun
$ yarn global add @quasar/cli
Copied to clipboard
TIP
global install location is in your PATH:

如果你正在使用 Yarn，请确保 Yarn
```
# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"

# for fish-shell:
set -U fish_user_paths (yarn global bin) $fish_user_paths
```
Copied to clipboard
Under Windows, modify user's PATH environment variable. If you are using yarn then add `%LOCALAPPDATA%\yarn\bin`, otherwise if you're using npm then add `%APPDATA%\npm`.
Or to do this easily, enter the following code in the terminal:
```
# If you're using Yarn:
setx path "%path%;%LocalAppData%\yarn\bin"

# Or if you're using NPM:
setx path "%path%;%AppData%\npm"
```
Copied to clipboard
WSL2
Microsoft’s recommended Nodejs development environment setup in WSL2.
使用 WSL2（Windows 的 Linux 子系统）时，Microsoft 推荐将文件保存在 Linux 文件系统中以最大限度地提高性能。如果项目文件位于 Windows 挂载点而不是本地 Linux 文件系统上，项目的构建速度将降低约 3 倍，并且 HMR（热模块重新加载）将无法正常工作。在基于 Windows 的 Docker 开发环境中也是如此。:::
¥When using WSL2 (Windows Subsystem for Linux) Microsoft recommends keeping files in the linux file system to maximize performance. Projects will build around 3X slower and HMR (Hot Module Reload) will not work without a hack if the project files are on the Windows mount instead of the local linux file system. This is also true in Docker for Windows based development environments.

Quasar CLI 工作原理(How Quasar CLI works)

¥How Quasar CLI works

Quasar CLI (@quasar/cli) 可与 @quasar/app-vite 或 @quasar/app-webpack 协同工作。第一个是可选的（但强烈推荐），它允许你直接运行 Quasar CLI 命令以及其他一些有用的命令，例如 quasar upgrade（无缝升级 Quasar 软件包）或 quasar serve（使用临时 Web 服务器提供你的可分发包）。第二个包是其核心（运行重要的命令 - dev、build、inspect、info、describe 等），它会被本地安装到每个 Quasar 项目文件夹中。

¥Quasar CLI (@quasar/cli) works in tandem with either @quasar/app-vite or @quasar/app-webpack. The first one is optional (but strongly recommended) and allows you to run Quasar CLI commands directly and some other useful commands like quasar upgrade (upgrade Quasar packages seamlessly) or quasar serve (serve your distributable with an ad-hoc webserver). The second package is the heart of it (runs the important commands - dev, build, inspect, info, describe etc) and it gets installed locally into every Quasar project folder.

不使用全局 @quasar/cli 运行(Running without the global @quasar/cli)

¥Running without the global @quasar/cli

但是，如果你希望独立于全局安装的 @quasar/cli 包，则可以直接运行 Quasar CLI 命令。它是 @quasar/app-vite 或 @quasar/app-webpack（每个项目文件夹都特定于 @quasar/app-vite 或 @quasar/app-webpack），用于运行所有 CLI 命令。

¥However, should you want independence of the globally installed @quasar/cli package, you have the possibility to directly run the Quasar CLI commands. It is @quasar/app-vite or @quasar/app-webpack (which is specific to each project folder) that will run all the CLI commands.

以下是选项：

¥Here are the options:

你可以编写 npm 脚本（在你的 package.json 中）来运行 Quasar 命令。
¥You can write npm scripts (in your package.json) to run Quasar commands.
向 package.json 添加一些 npm 脚本的示例：
¥Example of adding a few npm scripts into your package.json:
```
// package.json
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}
```
Copied to clipboard
如果你愿意，上述代码允许你运行 $ yarn dev 或 $ yarn build，而无需全局安装 @quasar/cli。
¥The above will allow you to run $ yarn dev or $ yarn build without the need of a globally installed @quasar/cli, should you wish to do so.
或者，你可以直接通过 Yarn 运行 Quasar CLI 命令：
¥Alternatively, you can directly run the Quasar CLI commands through Yarn:
```
$ yarn quasar dev
$ yarn quasar inspect
# ..etc
```
Copied to clipboard
或者使用 npx：
¥Or use npx:
```
$ npx quasar dev
$ npx quasar inspect
# ..etc
```
Copied to clipboard

下一步是什么？(What next?)

¥What next?

View Components

1. Introduction

2. 在线试用 Quasar CLI(Trying Quasar CLI Online)

3. TL;DR(TL;DR)

4. 安装/项目脚手架(Installation / Project Scaffolding)

5. Quasar CLI 工作原理(How Quasar CLI works)

6. 下一步是什么？(What next?)