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

【问题标题】：Using Vue.js / Bootstrap-vue.js CDN and components使用 Vue.js / Bootstrap-vue.js CDN 和组件
【发布时间】：2019-01-03 16:49:17
【问题描述】：

请原谅我的无知，我是 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 我缺少什么？我需要以不同的方式导入吗？

【问题讨论】：

标签： vue.js vuejs2 cdn

【解决方案1】：

只需在下方包含所需的 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 时，您将获得引导装饰。

【讨论】：

【解决方案2】：

如果使用CDN，则不需要use BootstrapVue 插件；它会为你做到这一点。只需包含脚本即可全局添加所有 BootstrapVue 组件。

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

你确实需要创建一个 Vue。

这是你的pen updated。

【讨论】：

【解决方案3】：

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

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

并且有必要将您的 HTML 代码保留在：

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

【讨论】：

对，我应该把我的 html 包裹在
...