未知的自定义元素：<VueTerminal> - 您是不是正确注册了组件？

Posted 2023-02-23

【中文标题】未知的自定义元素：<VueTerminal> - 您是不是正确注册了组件？

【英文标题】：Unknown custom element: <VueTerminal> - did you register the component correctly?未知的自定义元素：<VueTerminal> - 您是否正确注册了组件？

【发布时间】：2021-08-21 20:02:00

【问题描述】：

我正在尝试将一个外部组件导入我的 Nuxt 项目，但它一直说该组件未注册。我从谷歌尝试了很多东西，老实说，我对这个问题有点迷茫。非常感谢任何帮助！

package.json

  "name": "hjemmeside",
  "version": "1.0.0",
  "private": true,
  "scripts": 
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  ,
  "dependencies": 
    "@nuxtjs/style-resources": "^1.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.9.1",
    "node-sass": "^6.0.0",
    "nuxt": "^2.15.3",
    "sass-loader": "^10",
    "vue-terminal-ui": "^0.1.6"
  ,
  "devDependencies": 
    "webpack": "^4.46.0"
  

nuxt.config.js

export default 
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: 
    title: "hjemmeside",
    htmlAttrs: 
      lang: "en"
    ,
    meta: [
       charset: "utf-8" ,
       name: "viewport", content: "width=device-width, initial-scale=1" ,
       hid: "description", name: "description", content: "" 
    ],
    link: [ rel: "icon", type: "image/x-icon", href: "/favicon.ico" ]
  ,

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/custom.scss"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ["~/plugins/Terminal.client.js"],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],
  rules: [
    
      test: /\.s[ac]ss$/i,
      use: ["style-loader", "css-loader", "sass-loader"]
    
  ],
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["bootstrap-vue/nuxt"],
  bootstrapVue: 
    bootstrapCSS: false,
    bootstrapVueCSS: false
  ,
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: 
    transpile: ["Terminal"]
  
;

插件/Terminal.client.js

import Vue from "vue";
import VueTerminal from "vue-terminal-ui";

Vue.use(VueTerminal);

component/Hero.vue（我尝试使用该组件的地方）

<template>

        <client-only>
          <VueTerminal
            intro="intro"
            console-sign="$"
            allow-arbitrary
            
            @command="onCliCommand"
          ></VueTerminal>
        </client-only>

</template>

<script>
export default 
  methods: 
    onCliCommand(data, resolve, reject) 
      // typed command is available in data.text
      // don't forget to resolve or reject the Promise
      setTimeout(() => 
        resolve('')
      , 300)
    ,
  ,

</script>

<style lang="sass">
</style>

【问题讨论】：

这能回答你的问题吗？ Registering vue components globally

你应该使用Vue.component或者在本地导入并添加到你自己组件的components键中

【参考方案1】：

这是一个简单的修复 在本例中首先导入组件 VueTerminal 然后添加另一个字段或选项以导出 像这样

export default 
  components: 
    VueTerminal
  ,
  // other code

【参考方案2】：

如果你想让组件在全球范围内可用，你应该使用：

Vue.component('vue-terminal', VueTerminal)

你可以阅读它here。

此外，在模板中声明组件时，建议对组件使用 kebab-case。由于 HTML 不区分大小写。