使用 Vue.js / Bootstrap-vue.js CDN 和组件

Question

请原谅我的无知，我对 Vue 非常陌生。我正在寻找一种利用 CDN 中的 bootstrap-Vue 的方法（https://bootstrap-vue.js.org/docs/单击右侧导航上的浏览器）。我不知道如何调用组件。使用 webpack / CLI 版本，没有问题，但是 CDN，我不知道如何使用它。

我搭建了一个简单的 codepen.io 来测试这一点。我已经根据文档添加了 CSS 和 js 文件。

https://codepen.io/jasonflaherty/pen/rrzbxj

//do I need this?
Vue.use(BootstrapVue);

//try individual components.
import { Card } from 'bootstrap-vue/es/components';
Vue.use(Card);

使用 bootstrap-vue.js CDN 我缺少什么？我需要以不同的方式导入吗？

Answer 1

只需包含下面所需的 CDN 即可，无需调用（官方网站上Vue.use(XXX) 有一个基本示例。）

        <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

当您运行基本示例时，您将获得引导装饰。