命令列表 | Quasar 框架

Quasar CLI with Vite - @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 并收到错误命令未找到或@quasar/cli 版本似乎为未定义，您需要转到代码编辑器终端的设置并取消选中选项（或其等效选项）将项目根目录中的“node_modules/.bin”添加到 %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 开发服务器允许您通过在内存中编译和维护代码来开发您的应用程序。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 存储。

提示

此命令只是一个助手，用于快速构建页面/布局/组件/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 生成的 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

扩展

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

$ 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 包。

或者您可以构建自己的服务器。以下是一些示例

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 项目（应用程序、应用程序扩展或 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 <分支名称> 指定您喜欢的分支（例如 quasar-legacy-create <文件夹> owner/name --branch my-branch）。

警告

将可重用代码和 UI 组件构建到 Quasar 生态系统中的首选方法是 App Extensions。仅当您真正了解自己在做什么时才使用自定义启动套件，并注意它会使 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 项目文件夹

从自定义入门套件构建旧版

创建
旧版

从自定义入门套件构建
旧版