Vue：如何使用库中的指令答案

【问题标题】：Vue: How to use Directives from LibrariesVue：如何使用库中的指令
【发布时间】：2019-01-22 16:51:27
【问题描述】：

我正在尝试使用这个库：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>

但这不起作用。那么如何正确导入库以便使用指令呢？

【问题讨论】：

无论您在哪里导入 Vue 并启动您的应用程序。 app.js 或 index.js 通常。它可以在任何组件中使用。
控制台有错误吗？如果添加指令=scroll-to 失败，Vue 会抛出一个类似v-scroll-to doesn't exists 的警告。如果不是，应该是其他原因造成的。

标签： vue.js nuxt.js

【解决方案1】：

所以因为我使用 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 },

【讨论】：

【解决方案2】：

尝试使用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>

【讨论】：

谢谢你，这有帮助。我替换了require，因为我使用了nuxt.js，所以我做了一些不同的事情。