使用 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，则不需要useBootstrapVue插件；它会为你做到这一点。只需包含脚本即可全局添加所有 BootstrapVue 组件。

您不能在浏览器中使用 ES6 import 语句。

您需要创建一个 Vue。

这是你的pen updated。

Answer 2

你应该使用 Vue 的基本结构。所以，你的 JS 应该是：

const vue = new Vue({
  el: "#app"
})

并且您的 HTML 代码必须保留在：

<div id="app">
   <!-- ...your code -->
</div>

Answer 3

只需在下方包含所需的 CDN，无需调用 Vue.use(XXX) （官网有一个Basic example）

        <!-- 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>

当您运行获得Basic example时，您将获得bootstrap装饰。

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

Using Vue.js / Bootstrap-vue.js CDN and components

cdn

vue.js

vuejs2