為何捐款
API 瀏覽器
App Extensions
介紹
探索 App Extensions
開發指南
介紹
Prompts API
Install API
Index API
Uninstall API
提示與技巧
介紹
提供 UI 元件
提供指令
注入 Quasar 外掛程式
啟動套件同等項目
鏈式 Webpack
App Extension Index API

此頁面指的是 src/index.js 檔案，它會在 quasar dev 和 quasar build 上執行。這是主要程序，您可以在其中修改建置以符合 App Extension 的需求。例如，註冊啟動檔案、修改 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

包含此 App Extension 的 ext-id (字串)。

api.prompts

是一個物件，其中包含此 App Extension 安裝時對提示的回覆。有關提示的更多資訊，請查看 Prompts API。

api.resolve

解析此 App Extension 正在運行的應用程式中的路徑。無需導入 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

包含此 App Extension 正在運行的應用程式根目錄的完整路徑（字串）。

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

確保 App Extension 通過語義版本條件與主機應用程式中安裝的套件相容。

如果未滿足語義版本條件，則 @quasar/app 會錯誤並停止執行。

語義版本條件範例：'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

確定主機應用程式中是否通過語義版本條件安裝了某些套件。

語義版本條件範例：'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 的依賴項，而不是 App Extension 索引腳本檔案的相對路徑。

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 開發伺服器啟動後執行 hook ($ quasar build)。此時，開發伺服器已啟動並且可用，如果您希望對其執行某些操作。

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

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

api.beforeBuild

在 Quasar 為生產環境建置應用程式 ($ quasar build) 之前執行 hook。此時，尚未建立可發佈資料夾。

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

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

api.afterBuild

在 Quasar 為生產環境建置應用程式 ($ quasar build) 之後執行 hook。此時，已建立可發佈資料夾並且可用，如果您希望對其執行某些操作。

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

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

api.onPublish

如果請求發佈 ($ quasar build -P)，則在 Quasar 為生產環境建置應用程式且 afterBuild hook（如果指定）已執行後執行 hook。

可以使用 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 時，鏈式自訂 service worker 的 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-present PULSARDEV SRL, Razvan Stoenescu
本網站的設計與 Dreamonkey Srl 合作完成