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

• 单页应用程序（SPA/网站）
• 服务器端渲染应用程序（SSR/网站）
• 渐进式 Web 应用程序（PWA）
• 浏览器扩展（BEX）
• 移动应用程序（通过 Cordova 或 Capacitor）
• Electron 应用程序

…在同一个项目文件夹中，确保您遵循最佳的 Quasar 实践，同时一切将开箱即用。

在线试用 Quasar CLI

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

TL;DR

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

如果您想要，请选择 Quasar CLI with Vite

• 更快的开发服务器启动
• 更快的热更新
• 更快的构建
• 更好的 PWA、SSR 和 BEX Quasar 模式（更多功能）

安装/项目脚手架

1. 让我们创建一个 Quasar 应用程序

   Yarn

   NPM

   PNPM

   Bun

   ---

   $ yarn create quasar

   content_paste

   已复制到剪贴板
   
   

   提示

   您可能会看到一个确认，要求安装 create-quasar 包，按回车键确认。

2. 选择 App with Quasar CLI 选项，然后选择 Quasar v2。

3. 然后会询问您想要哪个 Quasar App CLI。您更喜欢 Vite 还是 Webpack？

   提示：如果您想要，请选择“Quasar CLI with Vite”

   • 更快的开发服务器启动
   • 更快的热更新
   • 更快的构建
   • 更好的 PWA、SSR 和 BEX Quasar 模式（更多功能）

4. 回答其余问题，您就快完成了。

5. 现在，您是否希望能够直接运行 Quasar CLI 命令（例如 $ quasar dev/build）或通过 yarn 或 npx ($ yarn quasar dev/build / npx quasar dev/build)？

   我们强烈建议您选择第一个选项，以便能够直接运行命令。实际上，您将能够做更多的事情，而不仅仅是这些（例如，“quasar upgrade”或“quasar serve”命令）。为此，您需要全局安装 @quasar/cli 包

   Yarn

   NPM

   PNPM

   Bun

   ---

   $ yarn global add @quasar/cli

   content_paste

   已复制到剪贴板

   提示

   如果您使用的是 Yarn，请确保 Yarn 全局安装位置 在您的 PATH 中
   
   

   # in ~/.bashrc or equivalent
   export PATH="$(yarn global bin):$PATH"
   
   # for fish-shell:
   set -U fish_user_paths (yarn global bin) $fish_user_paths

   content_paste

   已复制到剪贴板

   
   在 Windows 下，修改用户的 PATH 环境变量。如果您使用的是 yarn，则添加 `%LOCALAPPDATA%\yarn\bin`，否则如果您使用的是 npm，则添加 `%APPDATA%\npm`。
   或者要轻松地执行此操作，在终端中输入以下代码

   # If you're using Yarn:
   setx path "%path%;%LocalAppData%\yarn\bin"
   
   # Or if you're using NPM:
   setx path "%path%;%AppData%\npm"

   content_paste

   已复制到剪贴板

   WSL2

   Microsoft 建议的 Nodejs 在 WSL2 中的开发环境设置.

   在使用 WSL2（适用于 Linux 的 Windows 子系统）时，Microsoft 建议 将文件保存在 linux 文件系统中以最大限度地提高性能。如果项目文件位于 Windows 挂载点而不是本地 linux 文件系统中，则项目构建速度会慢 3 倍，HMR（热模块替换）将无法正常工作，需要进行一些调整才能实现。这在基于 Docker for Windows 的开发环境中也是如此。

Quasar CLI 的工作原理

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 包，您可以直接运行 Quasar CLI 命令。是 @quasar/app-vite 或 @quasar/app-webpack（特定于每个项目文件夹）运行所有 CLI 命令。

以下是选项

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

   在 package.json 中添加一些 npm 脚本的示例

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

   content_paste

   已复制到剪贴板

   以上操作将允许您运行 $ yarn dev 或 $ yarn build，而无需全局安装 @quasar/cli，如果您希望这样做。

2. 或者，您可以通过 Yarn 直接运行 Quasar CLI 命令

   $ yarn quasar dev
   $ yarn quasar inspect
   # ..etc

   content_paste

   已复制到剪贴板
   
   

3. 或使用 npx

   $ npx quasar dev
   $ npx quasar inspect
   # ..etc

   content_paste

   已复制到剪贴板

下一步？