Question

我正在尝试将外部组件导入我的 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
            height="500px"
            @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>

Answer 1

如果你想让组件全局可用，你应该使用：

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

您可以阅读它here。

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

Answer 2

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

export default {
  components: {
    VueTerminal
  },
  // other code
}

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

2 个答案: