使用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时，你将得到自助装饰。