我正在尝试将一个外部组件导入到我的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"]
  }
};plugins/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>发布于 2021-06-04 01:32:50
如果要使组件全局可用,则应使用:
Vue.component('vue-terminal', VueTerminal)你可以在here上读到它。
此外,当在模板中声明组件时,建议对组件使用kebab-case。因为HTML不区分大小写。
https://stackoverflow.com/questions/67825826
复制相似问题