Question

我正在尝试使用以下库：https://github.com/rigor789/vue-scrollto

但是我在使用它时遇到了麻烦，而且说明对我不是很有帮助。它说我应该这样做：

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

但是我不知道该在哪里做。所以我试过像这样使用它：

<template>
  <div>
    <Navbar/>
    <Cover/>
    <button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
    <Offers/>
    <AboutUs id="about"/>
    <Info/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Cover from '@/components/main/Cover'
import Offers from '@/components/main/Offer/Offers'
import AboutUs from '@/components/main/AboutUs'
import Info from '@/components/main/Info'
import Menu from '@/components/main/menu/Menu'

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

export default {
  components: {
    Navbar,
    Cover,
    Offers,
    AboutUs,
    Info,
    Menu
  }
}
</script>

但这不起作用。那么，如何正确导入库才能使用指令？

Answer 1

尝试使用import而不是require。

构建应用程序时，es6脚本将被转换为旧的js版本。

<template>
  <div>
    <Navbar/>
    <Cover/>
    <button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
    <Offers/>
    <AboutUs id="about"/>
    <Info/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Cover from '@/components/main/Cover'
import Offers from '@/components/main/Offer/Offers'
import AboutUs from '@/components/main/AboutUs'
import Info from '@/components/main/Info'
import Menu from '@/components/main/menu/Menu'

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo)

export default {
  components: {
    Navbar,
    Cover,
    Offers,
    AboutUs,
    Info,
    Menu
  }
}
</script>

Answer 2

因此，因为我使用Vue，所以执行了以下操作：

使用以下代码在plugins文件夹中创建一个名为nuxt-scroll-to.js的新文件：

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto/vue-scrollto.js';

Vue.use(VueScrollTo)

并在nuxt.config.js数组中添加以下代码：{ src: '~/plugins/nuxt-scroll-to.js', ssr: false },

Vue：如何使用图书馆的指令

2 个答案: