在没有 webpack 的情况下使用 vuejs 3 执行 bootstrap vue 组件

Question

我想将一个组件集成到使用 angular js 1 的现有遗留应用程序中。我想用 vuejs 3 替换它，但问题是我无法使用 webpack。我用 vuejs3 和 bootstrap vue 创建了一个独立的网页，但不知何故组件不呈现。任何帮助或指导我做错了什么？使用 vuejs 3 是否可以运行一个没有任何 webpack 的独立组件？

有趣的是，它在控制台中呈现带有警告的 html 页面。

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
  <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.min.css"/>

<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
</head>

<body>
  <h1>Static HTML With Vue.js Single File Component</h1>

  <div id="app">
    
  </div>

  <script type="module">
    import app from './app.js'
    const {createApp} = Vue;
    createApp(app).mount('#app');
</script>
</body>
</html>

app.js

export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [
          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
          .............
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    },
  
    template: `
        <div class="overflow-auto">
    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>
    <b-pagination v-model="currentPage"  :total-rows="rows"  :per-page="perPage"  aria-controls="my-table"></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

  </div>
    `,
};

Answer 1

版本 2.x.x BootstrapVue 不支持 Vue 3。然而，下一个主要版本 BootstrapVue 3（尚未发布）将支持它。截至目前 post，BootstrapVue 3 的 alpha 目标是在 2021 年第一季度推出。

在没有 webpack 的情况下使用 vuejs 3 执行 bootstrap vue 组件

Executing bootstrap vue component with vuejs 3 without webpack

javascript

vue.js

vuejs3