使用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，则不需要use BootstrapVue插件；它将为您做到这一点。仅包含脚本会全局添加所有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时，将获得引导程序装饰。