熟悉 Quasar 项目文件夹中可用的命令列表:
¥Familiarize yourself with the list of available commands inside a Quasar project:
$ quasar -h
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
prepare, p Prepare the app for linting, type-checking, IDE integration, etc.
clean, c Clean dev/build cache, /dist folder & entry points
new, n Quickly scaffold page/layout/component/... vue file
mode, m Add/remove Quasar Modes for your App
inspect Inspect Webpack/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
查看任何命令的帮助:
¥See help for any command:
$ quasar [command name] --help
升级(Upgrade)
¥Upgrade
检查(并可选)从 Quasar 项目文件夹升级 Quasar 软件包:
¥Check (and optionally) upgrade Quasar packages from a Quasar project folder:
# 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%”选项(或其等效选项),然后重新启动代码编辑器。
¥If you’re using a code editor terminal instead of the real one, you run quasar upgrade
and get an error Command not found or @quasar/cli version appears to be undefined, you will need to go to the settings of your code editor terminal and untick the option (or its equivalent) Add ‘node_modules/.bin’ from the project root to %PATH% then restart your code editor.
信息(Info)
¥Info
Quasar CLI 配备了多个 NPM 构建包(Webpack、Vue 等)的稳定组合,经过大量测试后会频繁更新。
¥The Quasar CLI is equipped with a stable combination of multiple NPM build packages (Webpack, Vue, etc) which gets updated frequently after heavy testing.
为了让你查看正在使用的 Node、Quasar CLI、Quasar、Vue(以及许多其他版本)的版本,请在 Quasar 项目文件夹中运行以下命令:
¥In order for you to see what versions of Node, Quasar CLI, Quasar, Vue (and many others) you are using, issue this command in a Quasar project folder:
$ quasar info
开发(Dev)
¥Dev
$ 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 capacitor -T ios"
$ quasar dev -m ios
# alias for "quasar dev -m capacitor -T android"
$ quasar dev -m android
# passing extra parameters and/or options to
# underlying "cordova" or "electron" executables:
$ quasar dev -m cordova -T ios -- some params --and options --here
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# when on Windows and using Powershell:
$ quasar dev -m cordova -T 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
boot up the emulator / building in terminal, in which case
the "--emulator" param will have no effect
Only for Capacitor mode:
--target, -T (required) App target [android|ios]
Only for BEX mode:
--target, -T (required) Browser family target [chrome|firefox]
Quasar 开发服务器允许你通过在内存中编译和维护代码来开发应用。Web 服务器将为你的应用提供服务,并提供开箱即用的热加载功能。在内存中运行可在你更改代码时提供更快的重建速度。
¥The Quasar development server allows you to develop your App by compiling and maintaining code in-memory. A web server will serve your App while offering hot-reload out of the box. Running in-memory offers faster rebuilds when you change your code.
热重载不仅仅是在代码更改时刷新浏览器。它会跳过刷新并动态更新你的代码,同时维护应用的状态(例如 Vue 的模型数据)。请注意,在某些情况下这是不可能的,因此开发网络服务器只会刷新你的浏览器。(始终确保你一次只运行一个 Quasar CLI 实例,否则热重载和其他功能将会中断!)
¥Hot Reload is much more than just refreshing your browser when code changes. It skips the refresh and updates your code on the fly, while maintaining your App’s state (like your Vue’s model data). Please note that there are cases when this is impossible, so the dev webserver will simply refresh your browser. (Always ensure you are running only one instance of Quasar CLI at a time, otherwise Hot-Reload and other stuff will break!)
根据你想要开发的内容,你可以使用 “quasar dev” 命令启动开发服务器,如下所示:
¥Based on what you want to develop, you can start the development server by using “quasar dev” command as follows:
# 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 -T [chrome|firefox]
# 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 个选项:
¥If you wish to change the hostname or port serving your App you have 3 options:
编辑
/quasar.config
文件:¥Edit the
/quasar.config
file:devServer: { host: '...', port: ... }
content_paste通过 ‘-H’(主机名)和 ‘-p’(端口)命令选项。
¥Through ‘-H’ (hostname) and ‘-p’ (port) command options.
如果这是一次性操作,请将主机名和/或端口指定为环境变量:
¥If this is a one time thing, specify the hostname and/or port as an environment variable:
$ PORT=3000 quasar dev $ HOSTNAME=1.1.1.14 quasar dev
content_paste
如果热重载似乎存在问题,你可以尝试以下两种解决方法:
¥If there appears to be an issue with hot reload, you can try two fixes:
使用以下命令更改项目文件夹的权限
¥Change the permissions for the project folder with
sudo chown -R username: .
content_paste或者使用 root 权限运行开发服务器
¥or run the dev server with root privileges
sudo quasar dev
content_paste
构建(Build)
¥Build
$ 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]
- Bex
[chrome|firefox]
--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
Only for BEX mode:
--target, -T (required) Browser family target [chrome|firefox]
Quasar CLI 可以将所有内容打包在一起,并针对生产环境优化你的应用。它会压缩源代码、提取供应商组件、利用浏览器缓存等等。
¥The Quasar CLI can pack everything together and optimize your App for production. It minifies source code, extracts vendor components, leverages browser cache and much more.
# 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 -T [chrome|firefox]
# 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>]
准备(Prepare)
¥Prepare
为 IDE 准备项目文件夹,使自动补齐和其他 IDE 功能正常工作。
¥Prepares your project folder for the IDE, making autocompletion and other IDE features work correctly.
$ quasar prepare
清理(Clean)
¥Clean
清理所有构建资源:
¥Cleans up all the build assets:
$ quasar clean
# requires "quasar prepare" to be called again
新建(New)
¥New
生成组件、页面、布局和 Pinia 存储。
¥Generates Components, Pages, Layouts, Pinia Store.
提示
此命令只是一个辅助工具,用于快速搭建页面/布局/组件/pinia 存储模块。你并非必须使用它,但它可以在你不知如何开始时为你提供帮助。
¥This command is simply a helper in order to quickly scaffold a page/layout/component/pinia store module. You are not required to use it, but can help you when you don’t know how to start.
$ quasar new -h
Description
Quickly scaffold files.
Usage
$ quasar new <p|page> [-f <js|ts>] <page_file_name>
$ quasar new <l|layout> [-f <js|ts>] <layout_file_name>
$ quasar new <c|component> [-f <js|ts>] <component_file_name>
$ quasar new <b|boot> [-f <js|ts>] <boot_name>
$ quasar new <s|store> [-f <js|ts>] <store_module_name>
$ quasar new ssrmiddleware [-f <js|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 (forcing TypeScript)
$ quasar new layout -f ts 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.
This gets inferred automatically for your project.
Possible overriding values:
* js - JS template
* ts - TS template
模式(Mode)
¥Mode
$ 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 构建”,它们将自动安装。
¥When you initialize a project with the CLI, you can build SPA (Single Page Website/Application), SSR (Server-side Render Website/Application with optional PWA client takeover), PWA (Progressive Web App), Mobile App (through Cordova), and/or Electron Apps. When you develop for SSR, PWA, Cordova or Electron, you need these modes installed. If you issue “quasar dev” or “quasar build” they will automatically be installed.
这些模式将在你的项目中添加一个 “src-*” 文件夹,其中包含非常具体的代码:
¥These modes will add a “src-*” folder into your project with very specific code for it:
文件夹 | 模式 | 描述 |
---|---|---|
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-*” 文件夹。
¥If for some reason you decide you don’t need a mode, you can remove it. This will permanently delete the respective “src-*” folder.
$ quasar mode remove pwa
描述(Describe)
¥Describe
此命令可用于描述项目正在使用的任何 Quasar 组件/指令/插件的 API。它特定于你项目文件夹中安装的 Quasar 版本。
¥This command is useful to describe the API of any Quasar components/directives/plugins that your project is using. It is specific to your Quasar version installed in your project folder.
示例:$ quasar describe QIcon
, $ quasar describe TouchPan
, $ quasar describe Cookies
.
¥Examples: $ 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>
# list all available API entries:
$ quasar describe list
# list available API entries that contain a String (ex "storage"):
$ quasar describe list storage
# 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
--events, -e Displays the API events
--methods, -m Displays the API methods
--computedProps, -c Displays the API computed props
--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
--docs, -d Opens the docs API URL
--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*
检查(Inspect)
¥Inspect
此命令可用于检查 Quasar CLI 生成的 Webpack 配置。
¥This command can be used to inspect the Webpack config generated by Quasar CLI.
$ quasar inspect -h
Description
Inspect Quasar generated Webpack/Esbuild 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
扩展(Ext)
¥Ext
此命令用于管理 应用扩展。
¥This command is used to manage 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
运行(Run)
¥Run
此命令用于运行已安装到项目文件夹中的 应用扩展 提供的命令。
¥This command is used to run commands supplied by the App Extensions that you’ve installed into your project folder.
$ 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
服务(Serve)
¥Serve
此命令也可以在生产环境中使用,它由 @quasar/cli
包的全局安装提供。
¥This command can be used in production too and it is being supplied by the global installation of @quasar/cli
package.
$ 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 服务器(Custom Node server)
¥Custom Node server
构建 SPA 或 PWA 时,可分发文件夹可以由任何静态 Web 服务器提供服务。要进行测试(假设你没有特定的 publicPath 或未使用 Vue Router “history” 模式),你可以使用 “http-server” npm 包。
¥When building a SPA or PWA, the distributable folder can be served by any static webserver. To test it out (assuming you don’t have a specific publicPath or not using Vue Router “history” mode), you can use the “http-server” npm package.
或者你可以构建自己的服务器。以下是一些示例:
¥Or you can build your own server. Here are some examples:
// when using default Vue Router "hash" mode
import express from 'express'
import serveStatic from 'serve-static'
const port = process.env.PORT || 5000
const app = express()
app.use(serveStatic(...path-to-dist...))
app.listen(port)
// when using Vue Router "history" mode
import express from 'express'
import serveStatic from 'serve-static'
import history from 'connect-history-api-fallback'
const 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” 包:
¥If you need URL rewrites of API, or simply put you want to proxy your API requests, then you can use “http-proxy-middleware” package:
// add this to one of the two previous examples:
import { createProxyMiddleware } from 'http-proxy-middleware'
// ...
app.use('/api', createProxyMiddleware({
target: `http://my-api.com:5050`,
pathRewrite: {"^/api" : ""}
}))
// then app.listen(...)
最后,运行以下文件之一:
¥Finally, run one of these files:
$ node my-server.js