javascript - Bootstrap 5 Nuxt 动态组件不起作用
问题描述
我正在尝试将 Bootstrap 5 实施到我的Nuxt project
.
样式工作正常,但过去使用的任何东西都jQuery
不起作用。
我的安装过程:
创建
/css
和/js
文件夹并移动到资产文件夹放入文件夹并
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>
推荐阅读
- python-3.x - ValueError:无法为具有形状“(25432、32、32、3)”的张量“占位符:0”提供形状(10、32、32、3)的值
- sql-server - 更改表中的列名 | 电源 BI
- javascript - 在 Web 应用程序中同时录制屏幕和预览摄像头在 Chrome/macOS 设置上效果不佳
- css - 调整手风琴图标
- visual-studio-code - 如何在 VSCode 中调试 Deno
- python - 如何从python中的图像中检测字体系列?
- python - 将字符串中的零替换为一和零替换为零的更有效方法(例如“100001”到“011110”)
- networking - 如何使用 VLAN 查找广播域和冲突域的数量
- r - 在 R 中有效的 data.table 中更新一列两次
- laravel - Laravel,根据类别选择更改表单字段