命令列表 | Quasar 框架

使用 Webpack 的 Quasar CLI - @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 并出现错误 Command not found 或 @quasar/cli 版本显示为 undefined，你需要进入代码编辑器终端的设置，取消勾选选项（或其等效项） Add ‘node_modules/.bin’ from the project root to %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 存储模块的脚手架。你不必使用它，但它可以帮助你从不知道如何开始的时候入手。

$ 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	包含可以调整的服务工作者文件。
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

扩展

此命令用于管理应用程序扩展。

$ 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

运行

此命令用于运行你已安装到项目文件夹中的应用程序扩展提供的命令。

$ 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

创建
传统

搭建 Quasar 项目文件夹

quasar create 是一个传统命令，不推荐使用，除非是自定义启动器套件。你应该使用 create-quasar 代替

Yarn

NPM

PNPM

Bun

yarn create quasar

从自定义启动器套件搭建
传统

如果你希望从自定义启动器套件创建 Quasar 项目（应用程序、应用程序扩展或 UI 套件），请使用 @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 生态系统中的首选方式是应用程序扩展。只有在你真正了解自己在做什么的情况下才使用自定义启动器套件，并注意它将使 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 项目文件夹

从自定义启动器套件搭建传统

创建
传统

从自定义启动器套件搭建
传统