为什么捐赠
API 资源管理器
应用扩展
介绍
发现应用扩展
开发指南
介绍
提示 API
安装 API
索引 API
卸载 API
技巧与窍门
介绍
提供 UI 组件
提供指令
注入 Quasar 插件
入门套件等效
链式 Webpack
应用程序扩展索引 API

此页面指的是 src/index.js 文件，该文件在 quasar dev 和 quasar build 执行时会被执行。这是你可以修改构建以满足应用程序扩展需求的主要过程。例如，注册启动文件、修改 webpack 过程、注册 CSS、注册 UI 组件、注册 Quasar CLI 命令等等。

文件基本结构示例

// can be async
export default function (api) {
  // props & methods for "api" Object described below
}

api.ctx

与 /quasar.config 文件中的 ctx 相同。帮助你根据 quasar dev 或 quasar build 运行的上下文做出决策。

示例：你可能希望在仅运行 electron 模式时使用其中一种 api 方法。

if (api.ctx.dev === true && api.ctx.mode.electron === true) {
  api.beforeDev((api) => {
    // do something when running quasar dev and
    // with Electron mode
  })
}

api.engine

包含正在使用的 Quasar CLI 引擎（作为字符串）。示例：@quasar/app-vite 或 @quasar/app-webpack。

api.hasVite

布尔值 - 是否在 @quasar/app-vite 上运行。

api.hasWebpack

布尔值 - 是否在 @quasar/app-webpack 上运行。

api.extId

包含此应用程序扩展的 ext-id（字符串）。

api.prompts

是一个对象，其中包含此应用程序扩展安装时提示的答案。有关提示的更多信息，请查看 提示 API。

api.resolve

解析此应用程序扩展正在运行的应用程序中的路径。无需导入 path 并自行解析路径。

// resolves to root of app
api.resolve.app('src/my-file.js')

// resolves to root/src of app
api.resolve.src('my-file.js')

// resolves to root/public of app
// (@quasar/app-webpack v3.4+ or @quasar/app-vite v1+)
api.resolve.public('my-image.png')

// resolves to root/src-pwa of app
api.resolve.pwa('some-file.js')

// resolves to root/src-ssr of app
api.resolve.ssr('some-file.js')

// resolves to root/src-cordova of app
api.resolve.cordova('config.xml')

// resolves to root/src-electron of app
api.resolve.electron('some-file.js')

// resolves to root/src-electron of app
api.resolve.electron('some-file.js')

// resolves to root/src-bex of app
api.resolve.bex('some-file.js')

api.appDir

包含此应用程序扩展正在运行的应用程序根目录的完整路径（字符串）。

api.hasTypescript
@quasar/app-vite 1.6+
@quasar/app-webpack 3.11+

/**
 * @return {Promise<boolean>} host project has Typescript active or not
 */
await api.hasTypescript()

api.hasLint
@quasar/app-vite 1.6+
@quasar/app-webpack 3.11+

/**
 * @return {Promise<boolean>} host project has ESLint or not
 */
await api.hasLint()

api.getStorePackageName
@quasar/app-vite 1.6+
@quasar/app-webpack 3.11+

/**
 * @return {Promise<string|undefined>} 'pinia' | 'vuex' | undefined
 */
await api.getStorePackageName()

api.getNodePackagerName
@quasar/app-vite 1.6+
@quasar/app-webpack 3.11+

/**
 * @return {Promise<'npm' | 'yarn' | 'pnpm' | 'bun'>}
 */
await api.getNodePackagerName()

api.compatibleWith

确保应用程序扩展与通过 semver 条件在宿主应用程序中安装的软件包兼容。

如果 semver 条件不满足，则 @quasar/app 会出错并停止执行。

semver 条件示例：'1.x || >=2.5.0 || 5.0.0 - 7.2.3'。

/**
 * @param {string} packageName
 * @param {string} semverCondition
 */
api.compatibleWith('@quasar/app', '1.x')
一个更复杂的示例
if (api.hasVite === true) {
  api.compatibleWith('@quasar/app-vite', '^2.0.0-beta.1')
}
else {
  api.compatbileWith('@quasar/app-webpack', '^4.0.0-beta.1')
}

api.hasPackage

确定某个软件包是否通过 semver 条件安装在宿主应用程序中。

semver 条件示例：'1.x || >=2.5.0 || 5.0.0 - 7.2.3'。

/**
 * @param {string} packageName
 * @param {string} (optional) semverCondition
 * @return {boolean} package is installed and meets optional semver condition
 */
if (api.hasPackage('vuelidate')) {
  // hey, this app has it (any version of it)
}
if (api.hasPackage('quasar', '^2.0.0')) {
  // hey, this app has Quasar UI v2 installed
}

api.hasExtension

检查另一个应用程序扩展是否已 npm 安装并且 Quasar CLI 已调用它。

/**
 * Check if another app extension is installed
 *
 * @param {string} extId
 * @return {boolean} has the extension installed & invoked
 */
if (api.hasExtension(extId)) {
  // hey, we have it
}

api.getPackageVersion

获取宿主应用程序软件包的版本。

/**
 * @param {string} packageName
 * @return {string|undefined} version of app's package
 */
console.log( api.getPackageVersion(packageName) )
// output examples:
//   1.1.3
//   undefined (when package not found)

api.extendQuasarConf

扩展 quasar.config 文件

/**
 * @param {function} fn
 *   (cfg: Object, ctx: Object) => undefined
 */
api.extendQuasarConf ((conf, api) => {
  // do something with quasar.config file:
  // add, change anything
})
一个更复杂的示例
api.extendQuasarConf ((conf, api) => {
  if (api.hasVite === true) {
    // do something with quasar.config file that is specific
    // to @quasar/app-vite
  }
  else { // api.hasWebpack === true
    // do something with quasar.config file that is specific
    // to @quasar/app-webpack
  }
})

注册启动和 css 文件

export default function (api, ctx) {
  api.extendQuasarConf((conf, api) => {
    // make sure my-ext boot file is registered
    conf.boot.push('~quasar-app-extension-my-ext/src/boot/my-ext-bootfile.js')

    if (api.hasVite !== true) {
      // make sure boot file transpiles
      conf.build.transpileDependencies.push(/quasar-app-extension-my-ext[\\/]src[\\/]boot/)
      // if boot file imports anything, make sure that
      // the regex above matches those files too!
    }

    // make sure my-ext css goes through webpack
    conf.css.push('~quasar-app-extension-my-ext/src/component/my-ext.sass')
  })
}

提示

请注意路径前面的波浪号 (~)。这告诉 Quasar CLI 该路径是来自 node_modules 的依赖项，而不是应用程序扩展索引脚本文件的相对路径。

api.registerCommand

注册一个命令，该命令将作为 quasar run <ext-id> <cmd> [args]（或简短形式：quasar <ext-id> <cmd> [args]）可用。

/**
 * @param {string} commandName
 * @param {function} fn
 *   ({ args: [ string, ... ], params: {object} }) => ?Promise
 */
api.registerCommand('start', ({ args, params }) => {
  // do something here

  // this registers the "start" command
  // and this handler is executed when running
  // $ quasar run <ext-id> start
})

api.registerDescribeApi

为 $ quasar describe 命令注册一个 API 文件。

/**
 * @param {string} name
 * @param {string} relativePath
 *   (relative path starting from the file where you have this call)
 */
api.registerDescribeApi(
  'MyComponent',
  './relative/path/to/my/component/file.json'
)

上述内容将响应 $ quasar describe MyComponent。

有关此类 JSON 文件的语法，请查看 /node_modules/quasar/dist/api（在您的项目文件夹中）。请注意，您的 JSON 必须包含一个 type 属性（“component”、“directive”、“plugin”）。例如

{
  "type": "component",
  "props": {
  },
  ...
}

提示

始终使用 quasar describe 命令进行测试，以确保您的语法正确且没有错误。

api.getPersistentConf

获取此扩展的内部持久化配置。如果它没有配置，则返回空对象。

/**
 * @return {object} cfg
 */
api.getPersistentConf()

api.setPersistentConf

设置此扩展的内部持久化配置。如果它已经存在，它将被覆盖。

/**
 * @param {object} cfg
 */
api.setPersistentConf({
  // ....
})

api.mergePersistentConf

深度合并到此扩展的内部持久化配置中。如果扩展还没有设置任何配置，这与第一次设置它基本相同。

/**
 * @param {object} cfg
 */
api.mergePersistentConf({
  // ....
})

api.beforeDev

在 $ quasar dev 命令运行之前准备外部服务，例如启动某些后端或应用程序依赖的任何其他服务。

可以使用 async/await 或直接返回 Promise。

/**
 * @param {function} fn
 *   (api, { quasarConf }) => ?Promise
 */
api.beforeDev((api, { quasarConf }) => {
  // do something
})

api.afterDev

在 Quasar 开发服务器启动后运行钩子 ($ quasar build)。此时，开发服务器已启动，如果需要，你可以对其进行操作。

可以使用 async/await 或直接返回 Promise。

/**
 * @param {function} fn
 *   (api, { quasarConf }) => ?Promise
 */
api.afterDev((api, { quasarConf }) => {
  // do something
})

api.beforeBuild

在 Quasar 为生产环境构建应用程序之前运行钩子 ($ quasar build)。此时，可分发文件夹尚未创建。

可以使用 async/await 或直接返回 Promise。

/**
 * @param {function} fn
 *   (api, { quasarConf }) => ?Promise
 */
api.beforeBuild((api, { quasarConf }) => {
  // do something
})

api.afterBuild

在 Quasar 为生产环境构建应用程序后运行钩子 ($ quasar build)。此时，可分发文件夹已创建，如果需要，你可以对其进行操作。

可以使用 async/await 或直接返回 Promise。

/**
 * @param {function} fn
 *   (api, { quasarConf }) => ?Promise
 */
api.afterBuild((api, { quasarConf }) => {
  // do something
})

api.onPublish

如果请求发布 ($ quasar build -P)，则在 Quasar 为生产环境构建应用程序并执行 afterBuild 钩子（如果指定）后运行钩子。

可以使用 async/await 或直接返回 Promise。

/**
 * @param {function} fn
 *   () => ?Promise
 * @param {object} opts
 *   * arg - argument supplied to "--publish"/"-P" parameter
 *   * distDir - folder where distributables were built
 */
api.onPublish((api, opts) => {
  // do something
})

@quasar/app-vite 仅限

api.extendViteConf

/**
 * @param {function} fn
 *   (viteConf: Object, invoke: Object {isClient, isServer}, api) => undefined
 */
if (api.hasVite === true) {
  api.extendViteConf((viteConf, { isClient, isServer }, api) => {
    // add/remove/change Quasar CLI generated Vite config object
  })
}

api.extendSSRWebserverConf

/**
 * @param {function} fn
 *   (esbuildConf: Object, api) => undefined
 */
if (api.hasVite === true) {
  api.extendSSRWebserverConf((esbuildConf, api) => {
    // add/remove/change Quasar CLI generated esbuild config object
    // that is used for the SSR webserver (includes SSR middlewares)
  })
}

api.extendElectronMainConf

/**
 * @param {function} fn
 *   (esbuildConf: Object, api) => undefined
 */
if (api.hasVite === true) {
  api.extendElectronMainConf((esbuildConf, api) => {
    // add/remove/change Quasar CLI generated esbuild config object
    // that is used for the SSR webserver (includes SSR middlewares)
  })
}

api.extendElectronPreloadConf

/**
 * @param {function} fn
 *   (esbuildConf: Object, api) => undefined
 */
if (api.hasVite === true) {
  api.extendElectronPreloadConf((esbuildConf, api) => {
    // add/remove/change Quasar CLI generated esbuild config object
    // that is used for the SSR webserver (includes SSR middlewares)
  })
}

api.extendPWACustomSWConf

/**
 * @param {function} fn
 *   (esbuildConf: Object, api) => undefined
 */
if (api.hasVite === true) {
  api.extendPWACustomSWConf((esbuildConf, api) => {
    // add/remove/change Quasar CLI generated esbuild config object
    // that is used for the SSR webserver (includes SSR middlewares)
  })
}

api.extendBexScriptsConf

/**
 * @param {function} fn
 *   (esbuildConf: Object, api) => undefined
 */
if (api.hasVite === true) {
  api.extendBexScriptsConf((esbuildConf, api) => {
    // add/remove/change Quasar CLI generated esbuild config object
    // that is used for the SSR webserver (includes SSR middlewares)
  })
}

@quasar/app-webpack 仅限

api.chainWebpack

链式 webpack 配置

/**
 * @param {function} fn
 *   (chain: ChainObject, invoke: Object {isClient, isServer}, api) => undefined
 */
if (api.hasWebpack === true) {
  api.chainWebpack((chain, { isClient, isServer }, api) => {
    // add/remove/change chain (Webpack chain Object)
  })
}

该配置是一个 Webpack 链式对象。有关该 API 的说明，请查看 webpack-chain 文档。

api.extendWebpack

扩展 webpack 配置

/**
 * @param {function} fn
 *   (cfg: Object, invoke: Object {isClient, isServer}, api) => undefined
 */
if (api.hasWebpack === true) {
  api.extendWebpack((cfg, { isClient, isServer }, api) => {
    // add/remove/change cfg (Webpack configuration Object)
  })
}

api.chainWebpackMainElectronProcess

链式主 electron 进程的 webpack 配置

/**
 * @param {function} fn
 *   (chain: ChainObject) => undefined
 */
if (api.hasWebpack === true) {
  api.chainWebpackMainElectronProcess((chain, { isClient, isServer }, api) => {
    // add/remove/change chain (Webpack chain Object)
  })
}

api.extendWebpackMainElectronProcess

扩展主 electron 进程的 webpack 配置对象

/**
 * @param {function} fn
 *   (cfg: Object) => undefined
 */
if (api.hasWebpack === true) {
  api.extendWebpackMainElectronProcess((cfg, { isClient, isServer }, api) => {
    // add/remove/change cfg (Webpack configuration Object)
  })
}

api.chainWebpackPreloadElectronProcess

链式预加载 electron 进程的 webpack 配置

/**
 * @param {function} fn
 *   (chain: ChainObject) => undefined
 */
if (api.hasWebpack === true) {
  api.chainWebpackPreloadElectronProcess((chain, { isClient, isServer }, api) => {
    // add/remove/change chain (Webpack chain Object)
  })
}

api.extendWebpackPreloadElectronProcess

扩展预加载 electron 进程的 webpack 配置对象

/**
 * @param {function} fn
 *   (cfg: Object) => undefined
 */
if (api.hasWebpack === true) {
  api.extendWebpackPreloadElectronProcess((cfg, { isClient, isServer }, api) => {
    // add/remove/change cfg (Webpack configuration Object)
  })
}

api.chainWebpackWebserver

链式 SSR webserver 的 webpack 配置（包括来自 /src-ssr/middlewares 的 SSR 中间件）

/**
 * @param {function} fn
 *   (chain: ChainObject) => undefined
 */
if (api.hasWebpack === true) {
  api.chainWebpackWebserver ((chain, { isClient, isServer }, api) => {
    // add/remove/change chain (Webpack chain Object)
    // isClient is always "false" and isServer is always "true"
  })
}

api.extendWebpackWebserver

扩展 SSR webserver 的 webpack 配置对象（包括来自 /src-ssr/middlewares 的 SSR 中间件）

/**
 * @param {function} fn
 *   (cfg: Object) => undefined
 */
if (api.hasWebpack === true) {
  api.extendWebpackWebserver((cfg, { isClient, isServer }, api) => {
    // add/remove/change cfg (Webpack configuration Object)
    // isClient is always "false" and isServer is always "true"
  })
}

api.chainWebpackCustomSW

链式使用 InjectManifest 时自定义服务工作者的 webpack 配置（/src-pwa/custom-service-worker.js 的内容）

/**
 * @param {function} fn
 *   (cfg: ChainObject) => undefined
 */
if (api.hasWebpack === true) {
  api.chainWebpackCustomSW ((cfg, { isClient, isServer }, api) => {
    // add/remove/change cfg (Webpack chain Object)
  })
}

api.extendWebpackCustomSW

使用 InjectManifest 时，扩展自定义 service worker 的 webpack 配置对象（/src-pwa/custom-service-worker.js 的内容）。

/**
 * @param {function} fn
 *   (chain: Object) => undefined
 */
if (api.hasWebpack === true) {
  api.extendWebpackCustomSW((chain, { isClient, isServer }, api) => {
    // add/remove/change chain (Webpack configuration Object)
  })
}
准备好了解更多吗？
开发指南
安装 API
开发指南
卸载 API
发现错误？在浏览器中编辑此页面
1. 简介
1.1. api.ctx
1.2. api.engine
1.3. api.hasVite
1.4. api.hasWebpack
1.5. api.extId
1.6. api.prompts
1.7. api.resolve
1.8. api.appDir
1.9. api.hasTypescript
1.10. api.hasLint
1.11. api.getStorePackageName
1.12. api.getNodePackagerName
1.13. api.compatibleWith
1.14. api.hasPackage
1.15. api.hasExtension
1.16. api.getPackageVersion
1.17. api.extendQuasarConf
1.18. api.registerCommand
1.19. api.registerDescribeApi
1.20. api.getPersistentConf
1.21. api.setPersistentConf
1.22. api.mergePersistentConf
1.23. api.beforeDev
1.24. api.afterDev
1.25. api.beforeBuild
1.26. api.afterBuild
1.27. api.onPublish
2. 仅限 @quasar/app-vite
2.1. api.extendViteConf
2.2. api.extendSSRWebserverConf
2.3. api.extendElectronMainConf
2.4. api.extendElectronPreloadConf
2.5. api.extendPWACustomSWConf
2.6. api.extendBexScriptsConf
3. 仅限 @quasar/app-webpack
3.1. api.chainWebpack
3.2. api.extendWebpack
3.3. api.chainWebpackMainElectronProcess
3.4. api.extendWebpackMainElectronProcess
3.5. api.chainWebpackPreloadElectronProcess
3.6. api.extendWebpackPreloadElectronProcess
3.7. api.chainWebpackWebserver
3.8. api.extendWebpackWebserver
3.9. api.chainWebpackCustomSW
3.10. api.extendWebpackCustomSW
MIT 许可证隐私政策
版权所有 © 2015-至今 PULSARDEV SRL，Razvan Stoenescu
本网站设计与Dreamonkey Srl合作完成。