在不带Webpack的情况下使用vuejs 3执行bootstrap vue组件
萨尔曼·拉扎（Salman Raza）
我想将组件集成到使用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>
`,
};
希氏
BootstrapVue的2.xx版本不支持Vue3。但是，下一主要发行版的BootstrapVue 3（尚未发布）将支持它。截至本文发布时，BootstrapVue 3的Alpha定位于2021年第一季度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Vue组件中使用Bootstrap？
- 2
Angular 4 在不使用服务的情况下从另一个组件执行函数
- 3
Vue-添加不带Webpack的CDN组件
- 4
在vue组件中使用.vue组件
- 5
使用Webpack导入Vue组件
- 6
Vue 3将动态组件与动态导入配合使用
- 7
使用 Vue.js / Bootstrap-vue.js CDN 和组件
- 8
尝试在不使用NPM或Webpack的情况下使用Vue js插件
- 9
如何使用Vue类组件访问VueJS 3和Typescript中的HTML ref？
- 10
如何在不使用CLI / Webpack / Node的情况下制作Vue 3.0应用程序
- 11
Vue2组件可以在Vue3中使用吗
- 12
在没有Vue CLI的情况下测试普通JavaScript Vue组件
- 13
Vue.js-使用组件
- 14
Bootstrap-vue：如何使用内置表过滤组件过滤第二组数据？
- 15
bootstrap-vue 组件呈现为注释
- 16
Vue 3：从其他组件设置动态组件
- 17
Vue 3-具有全局组件的“无法解析组件”
- 18
Vue3：是否可以使用app.component（...）注册单个文件组件？
- 19
如何使用传递给子组件的道具创建方法（Vue3）
- 20
不使用单个文件组件时强制在vue 3中重新生成代码
- 21
Vue 3-inject（）仅可在设置或功能组件内部使用
- 22
Vue：从组件内部的库（Bootstrap-Vue）延迟加载
- 23
通过 Webpack 暴露全局 Vue 组件
- 24
子组件的Vue 3插槽样式
- 25
在子组件具有项目列表的情况下，触发/更新在Quasar / Vue中从子组件更改为父组件的数据
- 26
Vue.js：与 DOM 下的组件通信
- 27
如何在python 3中不带空格的情况下打印？
- 28
如何在URL路径中不带斜杠的情况下实现angular2嵌套组件路由
- 29
在Vue 3中组织注册Vue全局组件
我来说两句