Vue整页未知元素答案

【问题标题】：Vue Fullpage Unknown elementVue整页未知元素
【发布时间】：2019-04-27 15:18:24
【问题描述】：

我有一个问题，我试图解决但没有结果。

我安装了 vue-fullpage，并导入了这个和 css。

但我有下一个错误

Unknown custom element: <full-page>

如果我检查“app.js”，Vue组件全页加载，但它仍然不起作用

代码：

<template>
  <div>
    <full-page :options="options" id="fulp" ref="fullpage">
      <div class="section">
        <h3>vue-fullpage.js</h3>
      </div>
      <div class="section">
        <div class="slide">
          <h3>Slide 2.1</h3>
        </div>
        <div class="slide">
          <h3>Slide 2.2</h3>
        </div>
        <div class="slide">
          <h3>Slide 2.3</h3>
        </div>
      </div>
      <div class="section">
        <h3>Section 3</h3>
      </div>
    </full-page>
  </div>
</template>

<script> 
 import FullPage from 'vue-fullpage.js'


  export default {
    name: 'Test full page',
    data() {
      return {
        options: {
          navigation: true,
          anchors: ['page1', 'page2', 'page3'],
          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',
            '#b4b8ab'
          ]
        },
      }
    },

  }

</script>

<style>
  @import 'https://unpkg.com/fullpage.js/dist/fullpage.min.css';

</style>

更新： 我还尝试放置 attr 组件：

export default {
        name: 'Test full page',
        components: {FullPage},
        data() {
          return {
            options: {
              navigation: true,
              anchors: ['page1', 'page2', 'page3'],
              sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',
                '#b4b8ab'
              ]
            },
          }
        },

但我收到“Vue.component 不是函数”的其他错误

【问题讨论】：

如果我说的话，我会得到 2 个错误，首先是未知元素，然后 Vue.component 不是函数
请更新您的问题，这样我就不必猜测您把它放在哪里了
完成。我更新了帖子
你的代码看起来不像usage guide。你在关注什么文档？
那个。在我关注 youtube 视频后，我尝试将其放入 main.js 中，但出现同样的错误。找不到组件，我不知道为什么。我安装了其他组件来测试和工作完美，只是发生了它

标签： vue.js

【解决方案1】：

根据他们的指南，您似乎没有使用 vue-fullpage.js 库。

他们将库作为 Vue 插件提供，因此您需要在您的根 Vue 实例中使用它，例如

// main.js or whatever
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins
Vue.use(VueFullPage)

这将全局安装full-page 组件，因此您无需将其导入到您的组件中。

【讨论】：

我尝试了 global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ...但我仍然。
@Carloscito Vue.use 不接受多个插件参数。对每个使用单独的 Vue.use() 调用
那会是什么错误，究竟？请编辑您的问题以包含您的最新代码和任何错误消息详细