如何为 VueJS 单页应用程序导入 Bootstrap 4 Tooltip 插件？答案

【问题标题】：How to import Bootstrap 4 Tooltip plugin for VueJS single page app?如何为 VueJS 单页应用程序导入 Bootstrap 4 Tooltip 插件？
【发布时间】：2018-08-11 19:34:45
【问题描述】：

我正在尝试将 Bootstrap 4 与 VueJS 单页应用程序一起使用，但无法弄清楚如何让 tooltip 工作。 （注意：我知道有一个 Bootstrap-vue 项目，但我不想使用那个......但是）

这是我的简单测试：

<template>
  <div>
    <span id='tip'>Test link</span>
  </div>
</template>

<script>
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/js/dist/popover.js';
import 'bootstrap/js/dist/tooltip.js';

export default {
  name: 'test',
  created: function() {
    $('#tip').tooltip({
      title: 'hello world'
    });
  }
};
</script>

但是，这只是呈现链接而没有工具提示。

控制台没有错误。那么，我在这里做错了什么？

【问题讨论】：

标签： vuejs2 bootstrap-4 twitter-bootstrap-tooltip

【解决方案1】：

正如我在 Discord 中回答的那样：解决方案是使用 mount 而不是 created ，这样您就可以访问 dom 以使这种方法正常工作（基本上）。

更多关于 Vue 生命周期钩子here

【讨论】：

【解决方案2】：

原来我需要使用mounted 属性，而不是created 属性。解决了！

【讨论】：