Quasar CLI 是 Quasar Framework 的驕傲。您可以無縫建置

• SPA (單頁應用程式/網站)、
• SSR (伺服器端渲染應用程式/網站)、
• PWA (漸進式 Web 應用程式)、
• 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 套件的訊息，按下 Enter 鍵以確認。

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 建議的 WSL2 中的 Nodejs 開發環境設定。

   當使用 WSL2 (Windows Subsystem for Linux) 時，Microsoft 建議 將檔案保留在 Linux 檔案系統中，以最大化效能。如果專案檔案位於 Windows 掛載點而不是本機 Linux 檔案系統上，專案的建置速度會慢約 3 倍，且 HMR (熱模組重新載入) 將無法運作，除非使用 hack 手法。這在基於 Windows 的 Docker 開發環境中也是如此。

Quasar CLI 的運作方式

Quasar CLI (@quasar/cli) 與 @quasar/app-vite 或 @quasar/app-webpack 協同運作。第一個是選用的 (但強烈建議)，讓您可以直接執行 Quasar CLI 命令以及其他一些有用的命令，例如 quasar upgrade (無縫升級 Quasar 套件) 或 quasar serve (使用 ad-hoc 網頁伺服器提供您的可發佈檔案)。第二個套件是核心 (執行重要的命令 - dev、build、inspect、info、describe 等)，並且會在本機安裝到每個 Quasar 專案資料夾中。

在沒有全域 @quasar/cli 的情況下執行

但是，如果您希望獨立於全域安裝的 @quasar/cli 套件，您可以直接執行 Quasar CLI 命令。將執行所有 CLI 命令的是 @quasar/app-vite 或 @quasar/app-webpack (每個專案資料夾特有的)。

以下是選項

1. 您可以編寫 npm 腳本 (在您的 package.json 中) 以執行 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

   已複製到剪貼簿

下一步？