[英]Bootstrap 5 Nuxt dynamic components not working
我正在尝试将 Bootstrap 5 实施到我的Nuxt project
中。
styles 工作正常,但以前使用jQuery
的任何东西都不起作用。
我的安装过程:
从Bootstrap 下载页面下载文件
创建/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 文件 - 试试这个:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.