使用没有 webpack 的 vuejs 3 执行引导 vue 组件

Question

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

有趣的是，它会在控制台中呈现 html 页面并显示警告。

索引.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>

应用程序.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

BootstrapVue 2.xx 版不支持 Vue 3。不过，下一个主要版本 BootstrapVue 3（尚未发布）将支持它。 在这篇文章中，BootstrapVue 3 的 alpha 版目标是 2021 年第一季度。

使用没有 webpack 的 vuejs 3 执行引导 vue 组件

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-21 06:21:44

使用没有 webpack 的 vuejs 3 执行引导 vue 组件

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-21 06:21:44

解决方案1
1 已采纳 2021-02-21 06:21:44