Bootstrap-Vue 坏了吗? [英] Is Bootstrap-Vue broken?

查看：29 发布时间：2021/9/20 20:22:22 javascript twitter-bootstrap vue.js vuejs2

本文介绍了Bootstrap-Vue 坏了吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我最后一个问题的后续问题，我再次尝试让 Vue 和 Bootstrap 在 Node.js 之上的简约设置中工作.为此，我没有使用任何包管理器或 CDN，而是在网页旁边提供了所有必需的文件.

现在，我将 Bootstrap-Vue 库与 Vue 结合使用，而不是使用 Bootsrap 和 Vue，但无论如何我都没有让它工作.所有 Bootstrap-Vue 元素都只会显示为纯文本，所以我开始工作，直到我有可以想象到的最简单的设置:

<html lang="zh-cn"><头><title>索引</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><身体><div class="text-center my-3"><b-btn v-b-popover.hover="'我是弹窗内容！'" title="弹窗标题">悬停在我身上</b-btn>

<script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script></html>

但即使是这个超级简单的网页也无法正确显示.使用原生 Bootstrap 组件进行测试确实有效，但所有 Bootstrap-Vue 的东西都不起作用.正在执行 Vue，我的调试控制台告诉我它已成功请求了所有需要的脚本文件.

需要注意的是，无论我是通过 Node.js 请求还是手动打开文档，网页看起来都是一样的.

那么，问题出在哪里?

解决方案

您是否将 Vue 应用于您的模板?

new Vue({el: '#app'});

<link href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" rel="样式表"/><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><div id="app" class="text-center my-3"><b-btn v-b-popover.hover="'我是弹窗内容！'" title="弹窗标题">悬停在我身上</b-btn>

This is a followup question of my last question, and again, I am trying to get Vue and Bootstrap to work in a minimalistic setup ontop of Node.js. For this, I am not using any package manager or CDN, but instead I have all the required files available next to the webpage.

Now, instead of using Bootsrap and Vue I am using the Bootstrap-Vue library with Vue, but I didn't get it to work no matter what. All Bootstrap-Vue elements would only display as plain text, so I started working my way back until I had the simplest setup imaginable:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Index</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
        <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
    </head>
    <body>

        <div class="text-center my-3">
            <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn>
        </div>

        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

    </body>
</html>

But even this super simple webpage is not being displayed correctly. Testing with native Bootstrap components does work, but all the Bootstrap-Vue stuff does not. Vue is being excecuted and my Debug Console tells me that it successfully requested all script files needed.

It should be noted that the webpage looks the same, regardless of me requesting it via Node.js or manually opening the document.

So, what is the problem?

解决方案

Are you applying Vue to your template?

new Vue({
  el: '#app'
});

<link href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app" class="text-center my-3">
  <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn>
</div>

这篇关于Bootstrap-Vue 坏了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Bootstrap-Vue 坏了吗? [英] Is Bootstrap-Vue broken?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Bootstrap-Vue 坏了吗? [英] Is Bootstrap-Vue broken?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭