首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >未知的自定义元素:<VueTerminal> -您是否正确注册了组件?

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

Stack Overflow用户
提问于 2021-06-04 01:10:06
回答 2查看 206关注 0票数 0

我正在尝试将一个外部组件导入到我的Nuxt项目中,但它一直显示该组件未注册。我尝试了谷歌的许多东西,但老实说,我在这个问题上有点迷茫。任何帮助都是非常感谢的!

package.json

代码语言:javascript
运行
复制
{
  "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

代码语言:javascript
运行
复制
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"]
  }
};

plugins/Terminal.client.js

代码语言:javascript
运行
复制
import Vue from "vue";
import VueTerminal from "vue-terminal-ui";

Vue.use(VueTerminal);

component/Hero.vue (我尝试在其中使用组件)

代码语言:javascript
运行
复制
<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>
EN

Stack Overflow用户

回答已采纳

发布于 2021-06-04 01:32:50

如果要使组件全局可用,则应使用:

代码语言:javascript
运行
复制
Vue.component('vue-terminal', VueTerminal)

你可以在here上读到它。

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

票数 4
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67825826

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档