我正在尝试将 Bootstrap 5 实现到我的 Nuxt 元素
中。
样式工作正常,但任何过去使用 jQuery
的东西都不起作用。
我的安装过程:
从 Bootstrap download page 下载文件
创建
/css
和/js
文件夹并移至 asset 文件夹将
bootstrap.css
放入/css
文件夹,并将bootstrap.min.js
放入/js
> 文件夹将配置添加到
nuxt.config.js
文件中:
css: [
'@/assets/css/bootstrap.css'
],
js: [
'@/assets/js/bootstrap.min.js'
],
- 刷新网站十几次。
这是我正在测试的直接从 Bootstrap 组件站点获取的代码:
// index.vue
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
最佳答案
不要编辑 nuxt.config.js 文件 - 试试这个:
- 在 layouts/default.vue 中,将以下代码添加到脚本部分
- 将 bootstrap 5 缩小的 js 和 css 捆绑文件放置在/static/bootstrap
<script>
export default {
data () {
return {
}
},
head () {
return {
title: 'Test Page - My awesome project',
link: [
{ rel: 'stylesheet', href: '/bootstrap/bootstrap.min.css' }
],
script: [
{ src: "/bootstrap/bootstrap.bundle.min.js", type: "text/javascript"}
]
}
}
}
</script>
关于javascript - Bootstrap 5 Nuxt 动态组件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66303836/