css - 如何在我的 Nuxt 应用程序中正确设置 bootstrap-vue?
问题描述
我对Nuxt.js
应用程序非常陌生,我正在尝试使用Nuxt.js and Vue.js
. 在使用创建项目期间,Nuxt cli
我添加了Bootstrap-vue
.
我在Bootstrap modal
创建时遇到了一些问题,因此我想Bootstrap vue
完全删除并将旧的平原添加Bootstrap
到我的应用程序中。我尝试根据此处找到的一些答案进行添加,但由于某种原因,它没有按预期工作,并且我Modal
没有正确显示drop-downs
等。所以我的猜测是我没有Bootstrap vue
从我的应用程序中正确删除并Bootstrap
完全添加.
如果我在这里遗漏了什么,有人可以告诉我:
** 移除 Bootstrap-vue ***
npm i bootstrap-vue --save
.bootstrap-vue.js
从文件夹中删除plugins
文件。plugin
从中删除nuxt-config.js
: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>
解决方案
我不确定您是否需要 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',
],
}
文档中的第一个示例运行良好
<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>
推荐阅读
- c++ - 在 Visual Studio 中调试 c++ 代码指针时遇到问题
- angular - TestBed 模拟服务
- sql - 是否可以从 SQL Server 调用 Web 服务?
- jenkins - 在 'git url' jenkins piplines 中使用变量
- python - 为什么我的正则表达式函数不起作用?
- python - Pyparsing parseaction 和列表类型错误
- python - 调整引用另一个数组的numpy数组的大小
- javascript - 为什么这个绑定的剔除元素变得未定义?
- php - 如何一起选择2个sql表?
- kubernetes - 为什么 Istio “身份验证策略”示例页面没有按预期工作?