為了在 Vue 應用程式中使用自定義元素庫， 必須修改應用程式以定義自定義元素和通知 Vue 編譯器在編譯過程中忽略哪些元素。

根據同一頁面，這可以通過修改 Vue 例項的配置來實現，如下所示：

Vue.config.ignoredElements = [/test-\w*/];

然而，這是Vue 2 的寫法

對於 Vue 3，您必須使用 isCustomElement，如下所示

app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)

但這會導致 Vue 在控制檯中丟擲以下警告：

[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/p
 

指示 Vue 忽略元件
來源： https://stackoverflow.com/questions/69119951/using-stencil-components-with-ionic-vue

預設情況下，Vue 將嘗試將非原生 HTML 標籤解析為已註冊的 Vue 元件，然後再回退到將其渲染為自定義元素。

這將導致 Vue 在開發過程中發出“無法解析元件”警告。

為了讓 Vue 知道某些元素應該被視為自定義元素並跳過元件解析，我們可以指定compilerOptions.isCustomElement

如果你在構建設定中使用 Vue，該選項應該通過構建配置傳遞，因為它是一個編譯時選項。

示例瀏覽器內配置

// Only works if using in-browser compilation.
// If using build tools, see config examples below.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')

示例 Vite 配置

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}
 

示例 Vue CLI 配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }))
  }
}