命令列表 | Quasar Framework

搭配 Vite 的 Quasar CLI - @quasar/app-vite

命令列表

熟悉 Quasar 專案中可用的命令列表

$ quasar

  Example usage
    $ quasar <command> <options>

  Help for a command
    $ quasar <command> --help
    $ quasar <command> -h

  Options
    --version, -v Print Quasar App CLI version

  Commands
    dev, d        Start a dev server for your App
    build, b      Build your app for production
    clean, c      Clean all build artifacts
    new, n        Quickly scaffold page/layout/component/... vue file
    mode, m       Add/remove Quasar Modes for your App
    inspect       Inspect Vite/esbuild configs used under the hood
                    - keeps into account your quasar.config file
                      and your installed App Extensions
    ext, e        Manage Quasar App Extensions
    run, r        Run specific command provided by an installed
                    Quasar App Extension
    describe      Describe a Quasar API (component)
    info, i       Display info about your machine and your App
    help, h       Displays this message

  If the specified command is not found, then "quasar run"
  will be executed with the provided arguments.

  Commands supplied by @quasar/cli global installation:

    upgrade       Check (and optionally) upgrade Quasar packages
                    from a Quasar project folder
    serve         Create an ad-hoc server on App's distributables

查看任何命令的說明

$ quasar [command name] --help

升級

從 Quasar 專案資料夾檢查 (並選擇性地) 升級 Quasar 套件

# view all options:
$ quasar upgrade -h

# checks for non-breaking change upgrades and displays them,
# but will not carry out the install
$ quasar upgrade

# checks for pre-releases (alpha/beta):
$ quasar upgrade -p

# checks for major new releases (includes breaking changes):
$ quasar upgrade -m

# use another npm registry url than what your machine is configured with:
# (added in @quasar/cli v2.4)
$ quasar upgrade -r https://registry.npmjs.org/

# to perform the actual upgrade,
# combine any of the params above and add "-i" (or "--install"):
$ quasar upgrade -i

程式碼編輯器終端機注意事項

如果您使用程式碼編輯器終端機而不是真實終端機，當您執行 quasar upgrade 並收到 _Command not found_ 或 _@quasar/cli_ 版本顯示為 _undefined_ 錯誤時，您需要前往程式碼編輯器終端機的設定，取消勾選 _Add ‘node_modules/.bin’ from the project root to %PATH%_ 選項 (或其等效選項)，然後重新啟動您的程式碼編輯器。

資訊

Quasar CLI 配備了多個 NPM 建置套件 (Vite、Vue 等) 的穩定組合，這些套件在經過大量測試後會頻繁更新。

為了讓您查看您正在使用的 Node、Quasar CLI、Quasar、Vue (和許多其他套件) 版本，請在 Quasar 專案資料夾中發出此命令

$ quasar info

開發

$ quasar dev -h

  Description
    Starts the app in development mode (hot-code reloading, error
    reporting, etc)

  Usage
    $ quasar dev
    $ quasar dev -p <port number>

    $ quasar dev -m ssr

    # alias for "quasar dev -m cordova -T ios"
    $ quasar dev -m ios

    # alias for "quasar dev -m cordova -T android"
    $ quasar dev -m android

    # passing extra parameters and/or options to
    # underlying "cordova" or "electron" executables:
    $ quasar dev -m ios -- some params --and options --here
    $ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
    # when on Windows and using Powershell:
    $ quasar dev -m ios '--' some params --and options --here
    $ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox

  Options
    --mode, -m       App mode [spa|ssr|pwa|cordova|capacitor|electron|bex] (default: spa)
    --port, -p       A port number on which to start the application
    --devtools, -d   Open remote Vue Devtools
    --hostname, -H   A hostname to use for serving the application
    --help, -h       Displays this message

    Only for Cordova mode:
    --target, -T     (required) App target [android|ios]
    --emulator, -e   (optional) Emulator name
                        Examples: iPhone-7, iPhone-X
                        iPhone-X,com.apple.CoreSimulator.SimRuntime.iOS-12-2
    --ide, -i        Open IDE (Android Studio / XCode) instead of letting Cordova
                        booting up the emulator, in which case the "--emulator"
                        param will have no effect

    Only for Capacitor mode:
    --target, -T     (required) App target [android|ios]

Quasar 開發伺服器允許您透過在記憶體中編譯和維護程式碼來開發您的 App。Web 伺服器將會提供您的 App，同時提供開箱即用的熱重載功能。在記憶體中執行可在您變更程式碼時提供更快的重新建置。

熱重載不僅僅是在程式碼變更時重新整理您的瀏覽器。它會略過重新整理並即時更新您的程式碼，同時維護您 App 的狀態 (例如您的 Vue 模型資料)。請注意，在某些情況下這是不可行的，因此開發 Web 伺服器將只會重新整理您的瀏覽器。(請務必確保您一次只執行一個 Quasar CLI 實例，否則熱重載和其他功能將會失效！)

根據您想要開發的內容，您可以使用 “quasar dev” 命令啟動開發伺服器，如下所示

# Developing a SPA
$ quasar dev
# ...or
$ quasar dev -m spa

# Developing for SSR
$ quasar dev -m ssr

# Developing a PWA
$ quasar dev -m pwa

# Developing a BEX for production
$ quasar dev -m bex

# Developing a Mobile App (through Cordova)
$ quasar dev -m cordova -T [android|ios]
# or the short form:
$ quasar dev -m [android|ios]

# Developing an Electron App
$ quasar dev -m electron

# Developing a Browser Extension (BEX)
$ quasar dev -m bex

# passing extra parameters and/or options to
# underlying "cordova" or "electron" executables:
$ quasar dev -m ios -- some params --and options --here
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# when on Windows and using Powershell:
$ quasar dev -m ios '--' some params --and options --here
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox

如果您希望變更主機名稱或連接埠以服務您的 App，您有 3 個選項

編輯 ‘/quasar.config’ 檔案
```
devServer: {
  host: '...',
  port: ...
}
```
已複製到剪貼簿
透過 ‘-H’ (主機名稱) 和 ‘-p’ (連接埠) 命令選項。
如果這是一次性操作，請將主機名稱和/或連接埠指定為環境變數
```
$ PORT=3000 quasar dev
$ HOSTNAME=1.1.1.14 quasar dev
```
已複製到剪貼簿

如果熱重載似乎有問題，您可以嘗試兩種修復方法

使用以下命令變更專案資料夾的權限
```
sudo chown -R username: .
```
已複製到剪貼簿
或以 root 權限執行開發伺服器
```
sudo quasar dev
```
已複製到剪貼簿

建置

$ quasar build -h

  Description
    Builds distributables of your app.

  Usage
    $ quasar build
    $ quasar build -p <port number>

    $ quasar build -m ssr

    # alias for "quasar build -m cordova -T ios"
    $ quasar build -m ios

    # alias for "quasar build -m cordova -T android"
    $ quasar build -m android

    # passing extra parameters and/or options to
    # underlying "cordova" executable:
    $ quasar build -m ios -- some params --and options --here
    # when on Windows and using Powershell:
    $ quasar build -m ios '--' some params --and options --here

  Options
    --mode, -m      App mode [spa|ssr|pwa|cordova|capacitor|electron|bex] (default: spa)
    --target, -T    App target
                      - Cordova (default: all installed)
                        [android|ios]
                      - Capacitor
                        [android|ios]
                      - Electron with default "@electron/packager" bundler (default: yours)
                        [darwin|win32|linux|mas|all]
                      - Electron with "electron-builder" bundler (default: yours)
                        [darwin|mac|win32|win|linux|all]
    --publish, -P   Also trigger publishing hooks (if any are specified)
                      - Has special meaning when building with Electron mode and using
                        electron-builder as bundler
    --debug, -d     Build for debugging purposes
    --skip-pkg, -s  Build only UI (skips creating Cordova/Capacitor/Electron executables)
                      - Cordova (it only fills in /src-cordova/www folder with the UI code)
                      - Capacitor (it only fills in /src-capacitor/www folder with the UI code)
                      - Electron (it only creates the /dist/electron/UnPackaged folder)
    --help, -h      Displays this message

    ONLY for Cordova and Capacitor mode:
    --ide, -i       Open IDE (Android Studio / XCode) instead of finalizing with a
                    terminal/console-only build

    ONLY for Electron mode:
    --bundler, -b   Bundler (@electron/packager or electron-builder)
                      [packager|builder]
    --arch, -A      App architecture (default: yours)
                      - with default "@electron/packager" bundler:
                          [ia32|x64|armv7l|arm64|mips64el|all]
                      - with "electron-builder" bundler:
                          [ia32|x64|armv7l|arm64|all]

    ONLY for electron-builder (when using "publish" parameter):
    --publish, -P  Publish options [onTag|onTagOrDraft|always|never]
                     - see https://www.electron.build/configuration/publish

Quasar CLI 可以將所有內容打包在一起，並針對生產環境最佳化您的 App。它可以縮減原始碼、提取供應商元件、利用瀏覽器快取等等。

# Build a SPA for production
$ quasar build
# ...or
$ quasar build -m spa

# Build a SSR for production
$ quasar build -m ssr

# Build a PWA for production
$ quasar build -m pwa

# Build a BEX for production
$ quasar build -m bex

# Build a Mobile App (through Cordova)
$ quasar build -m cordova -T [android|ios]
# or the short form:
$ quasar build -m [android|ios]

# Build an Electron App for production
$ quasar build -m electron

# passing extra parameters and/or options to
# underlying "cordova" executable:
$ quasar build -m ios -- some params --and options --here
# when on Windows and using Powershell:
$ quasar build -m ios '--' some params --and options --here

# Create a production build with ability to debug it
# (has source-maps and code is NOT minified)
$ quasar build -d [-m <mode>]

清理

清理所有建置資產

$ quasar clean

新增

產生元件、頁面、版面配置、Vuex Store。

提示

此命令僅是一個輔助工具，用於快速建立頁面/版面配置/元件/vuex store 模組的骨架。您並非必須使用它，但當您不知道如何開始時，它可以為您提供協助。

$ quasar new -h

  Description
    Quickly scaffold files.

  Usage
    $ quasar new <p|page> [-f <option>] <page_file_name>
    $ quasar new <l|layout> [-f <option>] <layout_file_name>
    $ quasar new <c|component> [-f <option>] <component_file_name>
    $ quasar new <b|boot> [-f ts] <boot_name>
    $ quasar new <s|store> [-f ts] <store_module_name>
    $ quasar new ssrmiddleware [-f ts] <middleware_name>

  Examples
    # Create src/pages/MyNewPage.vue:
    $ quasar new p MyNewPage

    # Create src/pages/MyNewPage.vue and src/pages/OtherPage.vue:
    $ quasar new p MyNewPage OtherPage

    # Create src/layouts/shop/Checkout.vue
    $ quasar new layout shop/Checkout.vue

    # Create src/layouts/shop/Checkout.vue with TypeScript options API
    $ quasar new layout -f ts-options shop/Checkout.vue

    # Create a store with TypeScript (-f ts is optional if tsconfig.json is present)
    $ quasar new store -f ts myStore

  Options
    --help, -h            Displays this message

    --format -f <option>  (optional) Use a supported format for the template
                          Possible values:
                             * default - Default JS template
                             * ts-composition - TS composition API (default if using TS)
                             * ts-composition-setup - TS composition API with <script setup>
                             * ts-options - TS options API
                             * ts-class - [DEPRECATED] TS class style syntax
                             * ts - Plain TS template (for boot, store, and ssrmiddleware files)

模式

$ quasar mode -h

  Description
    Add/Remove support for PWA / BEX / Cordova / Capacitor / Electron modes.

  Usage
    $ quasar mode [add|remove] [pwa|ssr|bex|cordova|capacitor|electron] [--yes]

    # determine what modes are currently installed:
    $ quasar mode

  Options
    --yes, -y     Skips the "Are you sure?" question
                  when removing a Quasar mode
    --help, -h    Displays this message

當您使用 CLI 初始化專案時，您可以建置 SPA (單頁網站/應用程式)、SSR (伺服器端渲染網站/應用程式，可選 PWA 用戶端接管)、PWA (漸進式 Web 應用程式)、行動 App (透過 Cordova) 和/或 Electron App。當您為 SSR、PWA、Cordova 或 Electron 開發時，您需要安裝這些模式。如果您發出 “quasar dev” 或 “quasar build” 命令，它們將會自動安裝。

這些模式將會在您的專案中新增一個 “src-*” 資料夾，其中包含針對該模式的非常特定的程式碼

資料夾	模式	描述
src-ssr	ssr	包含生產環境 Node 伺服器檔案。
src-pwa	pwa	包含您可以調整的 Service Worker 檔案。
src-cordova	cordova	是一個 Cordova 專案資料夾，將使用您的 ‘src’ 作為內容。調整 Cordova 設定、新增/移除平台、啟動畫面、Cordova 外掛程式等等，都從這個資料夾進行。但是，請勿觸碰 “src-cordova/www” 資料夾，因為它會在每次建置時被覆寫。
src-electron	electron	包含主要 Electron 執行緒的程式碼。渲染執行緒將會是您 ‘src’ 中的 App。
src-bex	bex	包含瀏覽器擴充套件模式的特定檔案。

如果由於某些原因，您決定不需要某種模式，您可以將其移除。這將永久刪除 相對應的 “src-*” 資料夾。

$ quasar mode remove pwa

描述

此命令可用於描述您的專案正在使用的任何 Quasar 元件/指令/外掛程式的 API。它特定於安裝在您的專案資料夾中的 Quasar 版本。

範例：$ quasar describe QIcon、$ quasar describe TouchPan、$ quasar describe Cookies。

$ quasar describe -h

  Description
    Describes a component API for project's Quasar version being used

  Usage
    $ quasar describe <component/directive/Quasar plugin>

    # display everything:
    $ quasar describe QIcon

    # displaying only props:
    $ quasar describe QIcon -p
    # displaying props and methods only:
    $ quasar describe QIcon -p -m
    # filtering by "si":
    $ quasar describe QIcon -f si
    # filtering only props by "co":
    $ quasar describe QIcon -p -f co

    # Open docs URL:
    $ quasar describe QIcon -d

  Options
    --filter, -f <filter> Filters the API
    --props, -p           Displays the API props
    --slots, -s           Displays the API slots
    --methods, -m         Displays the API methods
    --events, -e          Displays the API events
    --value, -v           Displays the API value
    --arg, -a             Displays the API arg
    --modifiers, -M       Displays the API modifiers
    --injection, -i       Displays the API injection
    --quasar, -q          Displays the API quasar conf options
    --help, -h            Displays this message

$ quasar describe QIcon

 Describing QIcon component API
 Description is based on your project's Quasar version

 Properties

   name (String)
     Description: Name of the icon, following Quasar convention
     Examples:
       map
       ion-add

   color (String)
     Description: Color name for component from the Quasar Color Palette
     Examples:
       primary
       teal-10

   size (String)
     Description: Size in CSS units, including unit name
     Examples:
       16px
       2rem

   left (Boolean)
     Description: Apply a standard margin on the left side. Useful if icon is on the right side of something.

   right (Boolean)
     Description: Apply a standard margin on the right side. Useful if icon is on the left side of something.

 Slots

   default
     Suggestions: QTooltip or QMenu

 Scoped Slots

   *No scoped slots*

 Events

   *No events*

 Methods

   *No methods*

檢查

此命令可用於檢查 Quasar CLI 產生的 Vite 設定。

$ quasar inspect -h

  Description
    Inspect Quasar generated Vite config

  Usage
    $ quasar inspect
    $ quasar inspect -c build
    $ quasar inspect -m electron -p 'build.outDir'

  Options
    --cmd, -c        Quasar command [dev|build] (default: dev)
    --mode, -m       App mode [spa|ssr|pwa|bex|cordova|capacitor|electron] (default: spa)
    --depth, -d      Number of levels deep (default: 2)
    --path, -p       Path of config in dot notation
                        Examples:
                          -p module.rules
                          -p plugins
    --thread, -t     Display only one specific app mode config thread
    --help, -h       Displays this message

擴充

此命令用於管理 App 擴充套件。

$ quasar ext -h

  Description
    Manage Quasar App Extensions

  Usage
    # display list of installed extensions
    $ quasar ext

    # Add Quasar App Extension
    $ quasar ext add <ext-id>

    # Remove Quasar App Extension
    $ quasar ext remove <ext-id>

    # Add Quasar App Extension, but
    # skip installing the npm package
    # (assumes it's already installed)
    $ quasar ext invoke <ext-id>

    # Remove Quasar App Extension, but
    # skip uninstalling the npm package
    $ quasar ext uninvoke <ext-id>

  Options
    --help, -h       Displays this message

執行

此命令用於執行您已安裝到專案資料夾中的 App 擴充套件所提供的命令。

$ quasar run -h

  Description
    Run app extension provided commands

  Usage
    $ quasar run <extension-id> <cmd> [args, params]
    $ quasar <extension-id> <cmd> [args, params]

    $ quasar run iconify create pic -s --mark some_file
    $ quasar iconify create pic -s --mark some_file
        # Note: "iconify" is an example and not a real extension.
        # Looks for installed extension called "iconify"
        # (quasar-app-extension-iconify extension package)
        # and runs its custom defined "create" command
        # with "pic" argument and "-s --mark some_file" params

  Options
    --help, -h       Displays this message

伺服

此命令也可以在生產環境中使用，並且由 @quasar/cli 套件的全域安裝提供。

$ quasar serve -h

  Description
    Start a HTTP(S) server on a folder.

  Usage
    $ quasar serve [path]
    $ quasar serve . # serve current folder

    If you serve a SSR folder built with the CLI then
    control is yielded to /index.js and params have no effect.

  Options
    --port, -p              Port to use (default: 4000)
    --hostname, -H          Address to use (default: 0.0.0.0)
    --gzip, -g              Compress content (default: true)
    --silent, -s            Suppress log message
    --colors                Log messages with colors (default: true)
    --open, -o              Open browser window after starting
    --cache, -c <number>    Cache time (max-age) in seconds;
                            Does not apply to /service-worker.js
                            (default: 86400 - 24 hours)
    --micro, -m <seconds>   Use micro-cache (default: 1 second)

    --history               Use history api fallback;
                              All requests fallback to /index.html,
                              unless using "--index" parameter
    --index, -i <file>      History mode (only!) index url path
                              (default: index.html)

    --https                 Enable HTTPS
    --cert, -C [path]       Path to SSL cert file (Optional)
    --key, -K [path]        Path to SSL key file (Optional)
    --proxy <file.mjs>      Proxy specific requests defined in file;
                            File must export Array ({ path, rule })
                            See example below. "rule" is defined at:
                            https://github.com/chimurai/http-proxy-middleware
    --cors                  Enable CORS for all requests
    --help, -h              Displays this message

  Proxy file example
    export default [
      {
        path: '/api',
        rule: { target: 'http://www.example.org' }
      }
    ]
    --> will be transformed into app.use(path, httpProxyMiddleware(rule))

自訂 Node 伺服器

當建置 SPA 或 PWA 時，可發佈的資料夾可以由任何靜態 Web 伺服器提供服務。為了進行測試 (假設您沒有特定的 publicPath 或未使用 Vue Router “history” 模式)，您可以使用 “http-server” npm 套件。

或者您可以建置自己的伺服器。以下是一些範例

const
  express = require('express'),
  serveStatic = require('serve-static'),
  port = process.env.PORT || 5000

const app = express()

app.use(serveStatic(...path-to-dist...))
app.listen(port)

const
  express = require('express'),
  serveStatic = require('serve-static'),
  history = require('connect-history-api-fallback'),
  port = process.env.PORT || 5000

const app = express()

app.use(history())
app.use(serveStatic(...path-to-dist...))
app.listen(port)

如果您需要 API 的 URL 重寫，或者簡而言之，您想要代理您的 API 請求，那麼您可以使用 “http-proxy-middleware” 套件。

// add this to one of the two previous examples:
const { createProxyMiddleware } = require('http-proxy-middleware')

// ...
app.use('/api', createProxyMiddleware({
  target: `http://my-api.com:5050`,
  pathRewrite: {"^/api" : ""}
}))

// then app.listen(...)

最後，執行其中一個檔案

$ node my-server.js

建立
舊版

建立 Quasar 專案資料夾骨架

quasar create 是一個舊版命令，不建議使用，除非用於自訂啟動套件。您應該改用 create-quasar。

Yarn

NPM

PNPM

Bun

$ yarn create quasar

從自訂啟動套件建立骨架
舊版

如果您希望從 **自訂** 啟動套件建立 Quasar 專案 (app、AppExtension 或 UI kit)，請改用 @quasar/legacy-create 全域可安裝的 CLI。

Yarn

NPM

PNPM

Bun

# globally install the @quasar/legacy-create CLI
$ yarn global add @quasar/legacy-create

# then:
$ quasar-legacy-create <folder_name> <address> [--branch <branch_name>]

使用儲存在您電腦上的啟動套件，方法是提供資料夾的 **本機路徑**：quasar-legacy-create <folder> ./my-custom-starter-kit。

使用儲存在任何公開存取的 Git 儲存庫中的啟動套件，方法是提供遵循此架構的參考

GitHub - github:owner/name 或簡稱為 owner/name
GitLab - gitlab:owner/name
Bitbucket - bitbucket:owner/name

master 分支將預設被簽出，但您可以透過 --branch <branch name> (例如 quasar-legacy-create <folder> owner/name --branch my-branch) 指定您偏好的分支。

警告

將可重複使用的程式碼和 UI 元件建置到 Quasar 生態系統中的首選方法是 App 擴充套件。僅在您真正了解自己在做什麼的情況下才使用自訂啟動套件，並意識到這會讓 Quasar 團隊更難以向您提供協助。

抓到錯誤了嗎？在瀏覽器中編輯此頁面

1. 介紹

2. 升級

3. 資訊

4. 開發

5. 建置

6. 清理

7. 新增

8. 模式

9. 描述

10. 檢查

11. 擴充

12. 執行

13. 伺服

13.1. 自訂 Node 伺服器

14. 建立

14.1. 建立 Quasar 專案資料夾骨架

14.2. 從自訂啟動套件建立骨架

升級

資訊

開發

建置

清理

新增

模式

描述

檢查

擴充

執行

伺服

自訂 Node 伺服器

建立舊版

建立 Quasar 專案資料夾骨架

從自訂啟動套件建立骨架舊版

建立
舊版

從自訂啟動套件建立骨架
舊版