命令列表 | Quasar Framework

Quasar CLI with Webpack - @quasar/app-webpack

命令列表

熟悉 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 generated Webpack config
    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 時出現錯誤「找不到命令」或「@quasar/cli 版本似乎未定義」，您需要前往程式碼編輯器終端機的設定，取消勾選「將 'node_modules/.bin' 從專案根目錄新增至 %PATH%」（或其等效選項），然後重新啟動您的程式碼編輯器。

資訊

Quasar CLI 配備了多個 NPM 建置套件（Webpack、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 開發伺服器可讓您透過在記憶體中編譯和維護程式碼來開發您的應用程式。Web 伺服器將為您的應用程式提供服務，同時提供開箱即用的熱重載。在記憶體中執行可在您變更程式碼時提供更快的重建。

熱重載不僅僅是在程式碼變更時重新整理您的瀏覽器。它會略過重新整理並動態更新您的程式碼，同時維護您應用程式的狀態（例如您的 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

如果您想要變更服務您應用程式的主機名稱或埠，您有 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 可以將所有內容打包在一起，並針對生產環境優化您的應用程式。它可以縮小原始碼、提取供應商元件、利用瀏覽器快取等等。

# 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 應用程式）、行動應用程式（透過 Cordova）和/或 Electron 應用程式。當您為 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」中的應用程式。
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 產生的 Webpack 設定。

$ quasar inspect -h

  Description
    Inspect Quasar generated Webpack config

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

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

Ext

此命令用於管理 App Extensions。

$ 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 Extensions 提供的命令。

$ 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 套件。

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

// when using default Vue Router "hash" mode
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)

// when using Vue Router "history" mode
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

建立
legacy

搭建 Quasar 專案資料夾

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

Yarn

NPM

PNPM

Bun

yarn create quasar

從自訂 starter kit 搭建
legacy

如果您希望從**自訂** starter kit 建立 Quasar 專案（應用程式、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>]

對於儲存在您機器上的 starter kit，請提供資料夾的**本機路徑**：quasar-legacy-create <folder> ./my-custom-starter-kit。

對於儲存在任何公開可存取的 Git 儲存庫中的 starter kit，請提供符合以下結構描述的參考

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 Extensions。只有在您真正了解自己在做什麼的情況下才使用自訂 starter kit，並且請注意，這會讓 Quasar 團隊更難為您提供協助。

發現錯誤了嗎？在瀏覽器中編輯此頁面

1. 簡介

2. 升級

3. 資訊

4. 開發

5. 建置

6. 清除

7. 新增

8. 模式

9. 描述

10. 檢查

11. Ext

12. 執行

13. 伺服器

13.1. 自訂 Node 伺服器

14. 建立

14.1. 搭建 Quasar 專案資料夾

14.2. 從自訂 starter kit 搭建

升級

資訊

開發

建置

清除

新增

模式

描述

檢查

Ext

執行

伺服器

自訂 Node 伺服器

建立legacy

搭建 Quasar 專案資料夾

從自訂 starter kit 搭建legacy

建立
legacy

從自訂 starter kit 搭建
legacy