如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue？
Posted
技术标签:
【中文标题】如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue？【英文标题】：How to properly setup bootstrap-vue in my Nuxt app? 【发布时间】：2021-10-21 18:23:46 【问题描述】：我对@987654322@ 应用程序非常陌生，我正在尝试使用Nuxt.js and Vue.js 创建一个Web 应用程序。在使用Nuxt cli 创建项目期间，我添加了Bootstrap-vue。
我在创建 Bootstrap modal 时遇到了一些问题，因此我想完全删除 Bootstrap vue 并将旧的普通 Bootstrap 添加到我的应用程序中。我尝试根据此处找到的一些答案添加，但由于某种原因，它没有按预期工作，我的Modal 没有与drop-downs 等一起正确显示。所以我的猜测是我没有正确删除@ 987654331@ 来自我的应用程序并完全添加了Bootstrap。
如果我在这里遗漏了什么，请告诉我：
** 移除 Bootstrap-vue ***
npm i bootstrap-vue --save。
从plugins 文件夹中删除bootstrap-vue.js 文件。
从nuxt-config.js 中删除plugin：plugins: ["@/plugins/bootstrap-vue"],
** 安装普通的旧 Bootstrap **
在我的nuxt-config.js 文件中添加了以下 CDN 链接：
script: [
src: "https://code.jquery.com/jquery-3.6.0.min.js"
,
src:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
]
link:[
rel: "stylesheet",
href:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
,
rel: "stylesheet",
href:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
]
当我使用Boostrap 创建一个简单的模态并添加下拉菜单后，它不会在模态上显示任何内容
有人可以确认我是否遵循正确的工作流程，还是我遗漏了什么？任何帮助或建议都会非常有帮助。
*** 已更新 ***
以下是我的nuxt-config.js 文件：
import colors from "vuetify/es5/util/colors";
export default
// Global page headers: https://go.nuxtjs.dev/config-head
head:
titleTemplate: "%s - openepcis-test-data-generator-ui",
title: "EPCIS | Test Data Generator",
htmlAttrs:
lang: "en"
,
meta: [
charset: "utf-8" ,
name: "viewport", content: "width=device-width, initial-scale=1" ,
hid: "description", name: "description", content: "" ,
name: "format-detection", content: "telephone=no"
],
script: [
/*
src: "https://code.jquery.com/jquery-3.6.0.min.js"
,
src:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
*/
],
link: [
rel: "icon", type: "image/x-icon", href: "/Logo.ico" ,
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
/*
rel: "stylesheet",
href:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
,
rel: "stylesheet",
href:
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
*/
]
,
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["@/assets/css/styles.css"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ["@/plugins/bootstrap-vue"],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
[
"@nuxtjs/eslint-module",
fix: true
],
["@nuxtjs/vuetify"],
["@nuxtjs/dotenv"]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: ["@nuxtjs/axios"],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios:
baseURL: process.env.API_URL,
headers:
"Content-Type": "text/plain"
,
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: ,
// Build Configuration: https://go.nuxtjs.dev/config-build
build:
babel:
plugins: [
["@babel/plugin-proposal-class-properties", loose: true ],
["@babel/plugin-proposal-private-methods", loose: true ],
["@babel/plugin-proposal-private-property-in-object", loose: true ]
]
,
server:
port: 5000
;
我的plugins/bootstrap-vue.js 中有以下内容：
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
除了以下是模态代码：
<template>
<div v-if="$store.state.showModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Add Options
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span
aria-hidden="true"
@click="hideModal"
>×</span>
</button>
</div>
<div class="modal-body">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
@click="hideModal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default
components: ,
data ()
return
,
methods:
hideModal ()
this.$store.commit(
'hideModal'
)
</script>
<style>
</style>
【问题讨论】：
您不想修复 Bootstrap Vue 吗？仅使用 Bootstrap 将使您失去所有已经为您完成的组件逻辑。所以，它只会变成一些样式而不是动态的（例如，没有Datepicker）。如果你只想要风格，你可能也应该考虑其他东西。 Bootstrap modal 有什么问题？
附带说明，如果您想要正确安装和使用 jquery 的指南，请点击此处：***.com/a/68414170/8816585
@kissu 实际上我也可以修复Bootstrap Vue。由于我没有找到任何合适的下拉列表和工作流程示例，我想切换到Plain Bootstrap，因为我之前曾短暂使用过它。请让我知道我需要遵循哪些步骤来修复我的Bootstrap vue 并让它与我的Modal 正常工作。
请向我们展示您的 nuxt.config.js 文件，任何与 Boostrap-vue 相关的附加配置，到目前为止已完成，哪些不工作（与预期相比）。
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 你为什么要使用这么旧版本的 Bootstrap？特别是如果您使用的是 BootstrapVue，您应该使用 Bootstrap 的 4.5.3 版本。
【参考方案1】：
我不确定您是否需要 Vuetify + BoostrapVue，但如果这不是问题，您可以使用 npx create-nuxt-app my-awesome-project 生成一个全新的项目并在那里选择 BootstrapVue。
否则，您可以按照此处的说明进行操作：https://bootstrap-vue.org/docs#nuxtjs-module
所以，你必须yarn add bootstrap-vue
然后将其添加到您的 nuxt.config.js 文件中即可
export default
modules: [
'bootstrap-vue/nuxt',
],
文档中的first example 效果很好
<template>
<div>
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" title="BootstrapVue">
<p class="my-4">Hello from modal!</p>
<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dryopdown-item active>Active action</b-dryopdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</b-modal>
</div>
</template>
【讨论】：
以上是关于如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue？的主要内容，如果未能解决你的问题，请参考以下文章
如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken？
如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示