文件的這個章節說明如何建立您自己的 App Extensions。

假設您已經安裝了其中一個官方 App Extensions。當您開始建置自己的 App Extensions 時，擁有這種經驗將非常有價值。如果您遇到問題，請訪問我們的 Discord 伺服器的 #app-extensions 頻道。

開始使用

App Extension 是一個 npm 套件。有兩種官方套件可用於建立 App Extensions

1. App Extension (AE) 套件
2. UI 套件

App Extension (AE) 套件

如果您的 app extension *不* 涉及 UI（即 *沒有* 元件或指令），請使用 AE 套件。這方面的一個例子是僅建立啟動檔案的擴充功能。

UI 套件

如果您的 app extension 涉及 UI（即 *有* 元件或指令），請使用 UI 套件。這方面的一個例子是提供 UI 元素以在您的應用程式中使用的擴充功能。它有一個 ui 資料夾用於建立您的元件/指令，一個 ui/dev Quasar 應用程式用於隔離測試您的元件/指令，以及一個 app-extension 資料夾用於建立 App Extension，該擴充功能將用於通過 Quasar CLI 將您的元件/指令注入到 Quasar 應用程式中。UI 套件也可以使用，以便您的元件/指令也可以與 Quasar Vite 外掛程式或 Vue CLI 或 UMD 一起使用。

第三方整合

如果您的目標是在 Vue 中安裝第三方函式庫，那麼這取決於該函式庫…

• 如果您還打算提供一些使用該 Vue 外掛程式的 UI 元件或類似元件，則應使用 *UI 套件*。這將是包含諸如日曆擴充功能之類內容的好選擇。
• 如果唯一目標是通過啟動檔案中的簡單 app.use(SomeVuePlugin) 以及可能的某些設定更新等來載入它，則 *AE 套件* 可能是一個更好的選擇。例如，對於包含 Axios 之類的東西，這是一個不錯的選擇。

建立 App Extension

$ yarn create quasar
# then pick the AppExtension option

它會提示您有關您的特定需求。您是否需要安裝腳本、解除安裝腳本？您會提示使用者一些問題嗎？僅選擇您將使用的內容。如果您另有決定，可以稍後手動新增這些內容。

為了本文件頁面的緣故，讓我們假設我們對 App Extension ext-id 問題（關於上述提示）回答了 my-ext。請記住，App Extension 原始碼資料夾的資料夾名稱可能與實際的 ext-id 不同。最後，我們將發布我們的新 npm 套件 (quasar-app-extension-my-ext)。

根據您的回應，Quasar CLI 將為您的 App Extension 的原始碼建立一個資料夾，其結構如下

app-extension 套件

ui 套件

除了 src/index.js（來自 app-extension 套件）或 app-extension/src/index.js（來自 ui 套件）之外，所有其他檔案都是可選的。您可以隨時手動新增或移除它們。

使用 UI 套件時，您將有兩個 npm 套件；一個用於 App Extension，另一個用於 UI 模組。為了使用 dev 應用程式進行測試，請從 ui 資料夾輸入 yarn dev。在 dev 資料夾中建立頁面以進行測試，它們將自動注入到測試應用程式中。此外，請查看 package.json 中的 scripts 區段，以查看您可用的內容。當您 yarn build 時，將建立一個 dist 資料夾，並填充各種套件類型（common、esm 和 umd）。

App Extension 腳本描述

處理套件依賴性

如果您的 App Extension 為了能夠運行而對某些套件具有自己的依賴性（Quasar CLI 提供的套件除外，例如 “quasar”、“@quasar/extras”、“@quasar/app” – 您應該在您的 /install.js 和 /index.js 腳本中對這些套件使用 “api.compatibleWith()” – 請查看 Install API 和 Index API），那麼將它們 yarn/npm 安裝到您的 App Extension 資料夾中將會將它們提供到託管應用程式中。

範例：您正在建立一個依賴 “my-table” npm 套件的 UI 元件（名稱是假的，僅在此處說明重點），那麼您應該在您的 App Extension 資料夾中 yarn/npm 安裝 “my-table”。

手動測試

我們需要建立一個 Quasar 專案資料夾，以便在我們開發擴充功能時能夠對其進行測試

$ yarn create quasar
# or
$ npm init quasar

# pick "App with Quasar CLI"

安裝和提示腳本

在測試 Quasar 專案資料夾中，我們手動新增我們的 App Extension。請注意，我們沒有指定 npm 套件名稱（尚未發布！），而是指定我們開發它的 App Extension 資料夾的路徑，因為我們想要測試未發布的工作

$ yarn add --dev file://path/to/our/app/ext/app-extension
# or
$ yarn add --dev link://path/to/our/app/ext/app-extension
# or
$ npm add --save-dev file://path/to/our/app/ext/app-extension

您需要弄清楚哪個命令最適合您的環境。

然後我們調用它。調用程序假定 App Extension 的套件已 yarn/npm 安裝（我們之前已完成），並跳過該步驟

# we said our <ext-id> will be "my-ext", so:
$ quasar ext invoke my-ext

這將觸發我們新的 App Extension 的安裝。每次您進行變更並想要測試它們時，都需要重做這兩個步驟。

此外，如果您希望在開發 App Extension 時在測試應用程式中具有 HMR（熱模組重新載入）功能，則您的 quasar.config file > devServer > watchFiles 看起來會像這樣

// quasar.config file for
// Quasar CLI with Webpack (@quasar/app-webpack)

devServer: {
  // be sure to change <myextid> below to
  // your App Extension name:
  watchFiles: [
    '/node_modules/quasar-app-extension-<myextid>/*'
  ]
}

@quasar/app-webpack

您可能想要擴充 Webpack 設定。假設您正在使用 chainWebpack 方法，您的 quasar.config file > build > chainWebpack 應該看起來像這樣

chainWebpack (chain) {
  chain.merge({
    snapshot: {
      managedPaths: []
    }
  })
},

@quasar/app-vite

您可能想要擴充 Vite 設定。假設您正在使用 extendViteConf 方法，您的 quasar.config file > build > extendViteConf 應該看起來像這樣

extendViteConf (viteConf, { isClient, isServer }) {
  // do stuff in-place with viteConf
},

解除安裝腳本

假設您已按照上述章節安裝了您的 App Extension，我們現在可以測試解除安裝腳本（如果有的話）

$ quasar ext uninvoke my-ext

上述命令類似地不會修改或從 package.json 和 node_modules 中移除 npm 套件。它只是調用解除安裝腳本，並將其從您的測試 Quasar 應用程式專案資料夾中的已註冊/已安裝 App Extensions 清單中移除。但是，您的最終使用者將調用 $ quasar ext remove my-ext 來解除安裝它，這也會解除安裝 npm 套件。

每次您對解除安裝腳本進行變更並想要測試它們時，您都需要重做這些安裝步驟並發出取消調用命令。

Index 腳本

在以上章節中，我們描述了如何測試提示、安裝和解除安裝腳本。現在是 index 腳本的時候了，它是您的 App Extension 的核心。

在這裡，您可以修改所有 quasar.config 檔案選項、擴充 Webpack 設定、註冊 Quasar CLI 命令、啟動開發應用程式所需的外部服務等等。

因此，每次執行 $ quasar dev 和 $ quasar build 時，都會執行 index 腳本。

為了測試 index 腳本，您可以在每次變更 App Extension 腳本程式碼中的某些內容時，重複上述的解除安裝和安裝程序。但這變得非常繁瑣。如果您在 Unix OS（MacOS、Linux）上進行開發，則可以利用 yarn link 命令，該命令會從 Quasar 測試應用程式的 node_modules 資料夾建立到您的擴充功能資料夾的 符號連結。

$ cd /path/to/app/extension/folder

# we register the extension through yarn
$ yarn link

$ cd /path/to/quasar/testing/app/folder

$ yarn link quasar-app-extension-<ext-id>
# in our demo case, it's this:
# $ yarn link quasar-app-extension-my-ext

請記住，如果您需要將任何依賴項 yarn/npm install 到**您的** App Extension 中，那麼您還必須解除安裝您的 App Extension 並在您的測試應用程式中重新安裝它

$ cd /path/to/app/extension/folder

# run yarn/npm command (install/uninstall, etc)

# then

$ cd /path/to/quasar/testing/app/folder

# Uninstall the app ext
$ quasar ext uninvoke my-ext

# Re-install the app ext
$ quasar ext invoke my-ext

您真的只需要 quasar ext invoke my-ext（安裝）App Extension 即可重新安裝它。上述資訊是為了完整性。

發布

當您完成 App Extension 並準備好部署它時，您只需將其發布到 npm 儲存庫即可。

在您的 App Extension 資料夾中，執行 yarn publish 或 npm publish。兩者做的事情相同。