Vue：如何使用库中的指令

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 它做了以下事情：

使用以下代码在插件文件夹中创建一个名为 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：如何使用库中的指令

Vue: How to use Directives from Libraries

vue.js

nuxt.js