- 首页
- 前端开发
- 如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue?
如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue?
[英] How to properly setup bootstrap-vue in my Nuxt app?
本文介绍了如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 Nuxt.js 应用程序非常陌生，我正在尝试使用 Nuxt.js 和 Vue.js 创建一个 Web 应用程序.在使用 Nuxt cli 创建项目期间，我添加了 Bootstrap-vue.
我在创建 Bootstrap modal 时遇到了一些问题，因此我想完全删除 Bootstrap vue 并将旧的普通 Bootstrap 添加到我的应用程序.我尝试根据这里找到的一些答案进行添加，但由于某种原因，它没有按预期工作，而且我的 Modal 没有通过 drop-downs 等正确显示.所以我的猜测是我没有从我的应用程序中正确删除 Bootstrap vue 并完全添加了 Bootstrap.
如果我在这里遗漏了什么，有人可以告诉我吗:
** 移除 Bootstrap-vue ***
npm i bootstrap-vue --save.- 从
plugins 文件夹中删除 bootstrap-vue.js 文件. - 从
nuxt-config.js 中删除 plugin: plugins: ["@/plugins/bootstrap-vue"],
** 安装普通的 Bootstrap **将以下 CDN 链接添加到我的 nuxt-config.js 文件:
脚本:[{源代码:https://code.jquery.com/jquery-3.6.0.min.js"},{源代码:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"}]
链接:[{rel:样式表"，href:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"},{rel:样式表"，href:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"}]
当我使用 Boostrap 创建一个简单的模态并为其添加下拉菜单时，执行这些操作后，它不会在模态上显示任何内容
有人可以确认我是否遵循了正确的工作流程还是我遗漏了什么?任何帮助或建议都会非常有帮助.
*** 更新 ***
以下是我的 nuxt-config.js 文件:
从vuetify/es5/util/colors"导入颜色；导出默认{//全局页头:https://go.nuxtjs.dev/config-head头: {titleTemplate: "%s - openepcis-test-data-generator-ui",标题:《EPCIS |测试数据生成器"，html属性:{朗:恩"},元:[{ 字符集:utf-8"},{名称:视口"，内容:宽度=设备宽度，初始比例=1"},{隐藏:描述"，名称:描述"，内容:"},{名称:格式检测"，内容:电话=否"；}],脚本: [/* {源代码:https://code.jquery.com/jquery-3.6.0.min.js"},{源代码:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"}*/],关联: [{ rel: "icon", type: "image/x-icon", href: "/Logo.ico";},{rel:样式表"，href:https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"}/* {rel:样式表"，href:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"},{rel:样式表"，href:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"}*/]},//全局 CSS:https://go.nuxtjs.dev/config-csscss: [@/assets/css/styles.css"],//在渲染页面之前运行的插件:https://go.nuxtjs.dev/config-plugins插件:[@/plugins/bootstrap-vue"]，//自动导入组件:https://go.nuxtjs.dev/config-components成分:真实，//用于开发和构建的模块(推荐):https://go.nuxtjs.dev/config-modules构建模块:[[@nuxtjs/eslint-module"，{修复:正确}],[@nuxtjs/vuetify"]，[@nuxtjs/dotenv"]],//模块:https://go.nuxtjs.dev/config-modules模块:[@nuxtjs/axios"]，//axios 模块配置:https://go.nuxtjs.dev/config-axios轴:{baseURL: process.env.API_URL,标题:{内容类型":文本/纯文本"}},//Vuetify 模块配置:https://go.nuxtjs.dev/config-vuetify验证:{}，//构建配置:https://go.nuxtjs.dev/config-build建造: {巴别:{插件: [[@babel/plugin-proposal-class-properties"，{松散:真实}]，[@babel/plugin-proposal-private-methods"，{松散:真实}]，[@babel/plugin-proposal-private-property-in-object"，{松散:真实}]]}},服务器: {端口:5000}};
我的 plugins/bootstrap-vue.js 中有以下内容:
从'vue'导入Vue从bootstrap-vue"导入 BootstrapVue导入'bootstrap/dist/css/bootstrap.css'导入'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue)
除此之外还有模态代码:
<div v-if="$store.state.showModal"><transition name="modal"><div class="modal-mask"><div class="modal-wrapper"><div class="modal-dialog";角色=文档"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">添加选项<按钮类型=按钮"类=关闭"数据关闭=模态"aria-label =关闭"><跨度咏叹调隐藏=真"；@click="hideModal";>×</span>
<div class="modal-body"><div class="下拉菜单";aria-labelledby="dropdownMenuButton"><a class="dropdown-item";href=#">动作</a><a class="dropdown-item";href=#">另一个动作</a><a class="dropdown-item";href=#">这里还有别的东西</a>
<div class="modal-footer"><按钮类型=按钮"class =btn btn-secondary"@click="hideModal";>关闭<按钮类型=按钮"class=btn btn-primary">保存更改
</模板><脚本>导出默认{成分: {}，数据 () {返回 {}},方法: {隐藏模态(){this.$store.commit('隐藏模态')}}}<风格></风格>
解决方案
我不确定您是否需要 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 {模块: ['bootstrap-vue/nuxt',],}
并且文档中的第一个示例运行良好
<div><b-button v-b-modal.modal-1>启动演示模式</b-button><b-modal id="modal-1";标题=BootstrapVue"><p class="my-4">来自 modal 的你好！</p><b-dropdown id="dropdown-1";文本=下拉按钮"类=m-md-2"><b-dropdown-item>第一个动作</b-dropdown-item><b-dropdown-item>第二个动作</b-dropdown-item><b-dropdown-item>第三个动作</b-dropdown-item><b-dropdown-divider></b-dropdown-divider><b-dryopdown-item active>主动动作</b-dryopdown-item><b-dropdown-item disabled>Disabled action</b-dropdown-item></b-下拉菜单></b-modal></模板>
I am very new to Nuxt.js application and I am trying to create a web application using the Nuxt.js and Vue.js. During the creation of the project using the Nuxt cli I have added the Bootstrap-vue.
I am facing some problems with Bootstrap modal creation hence I want to remove the Bootstrap vue completely and add the good old plain Bootstrap into my application. I tried adding as per a few of the answers found here but for some reason, it's not working as expected and my Modal is not being displayed properly with drop-downs etc. So my guess is that I have not properly removed the Bootstrap vue from my application and added the Bootstrap completely.
Can someone please let me know if I have missed something here:
** Removal of Bootstrap-vue ***
npm i bootstrap-vue --save.- Remove the
bootstrap-vue.js file from plugins folder.
- Remove
plugin from nuxt-config.js: plugins: ["@/plugins/bootstrap-vue"],
** Installing plaing old Bootstrap **
Added following CDN links to my nuxt-config.js file:
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"
}]
After doing these things when I create a simple modal using Boostrap and add drop-down to it, it does not display anything on the modal
Can someone please confirm if I am following proper workflow or am I missing something? Any help or recommendation would be really helpful.
*** UPDATED ***
Following is my nuxt-config.js file:
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
}
};
I have following things in my 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)
Apart from that following is code for modal:
<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>
解决方案
I'm not sure if you need Vuetify + BoostrapVue, but if it's not an issue you can generate a brand new project with npx create-nuxt-app my-awesome-project and select BootstrapVue there.
Otherwise, you can follow the instructions here: https://bootstrap-vue.org/docs#nuxtjs-module
So, you'll have to yarn add bootstrap-vue
Then adding this to your nuxt.config.js file does the thing
export default {
modules: [
'bootstrap-vue/nuxt',
],
}
And the first example in the documentation works well
<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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
