vue.js - BootstrapVue - Bootstrap CSS 被多次添加到我的 Vue 应用程序中

问题描述

我正在使用 BootstrapVue 并按照文档进行了设置。我看到的是，对于我的 Vue 应用程序中使用 BootstrapVue 组件的每个组件，我都将 Bootstrap 嵌入到我呈现的 HTML 中。在这种情况下，我添加了 27 个相同样式表的实例。

我看不出问题出在哪里。

这是我的 main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BRow, BCol, BContainer  } from 'bootstrap-vue'
import {InlineSvgPlugin} from "vue-inline-svg/dist/vue-inline-svg";
import VueSvgIconPolyFill from "@yzfe/vue-svgicon-polyfill";

Vue.config.productionTip = false

Vue.use(VueSvgIconPolyFill);
Vue.use(BCol, BRow, BContainer)
Vue.use(require('vue-moment'))
Vue.use(InlineSvgPlugin)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这是一个使用 BootstrapVue 的 Vue 组件示例

<template>
    <section class="latest-news">
        <b-container>
            <b-row class="latest-news__title-bar">
                <b-col class="d-flex align-items-center" :sm="12" :md="10">
                    <h2>
                        {{blockTitle}}
                        <a
                                href="#"
                                title="Collapse this section"
                                :class="`collapse-control ` + (isCollapsed ? 'collapse-control--collapsed' : '')"
                                @click.prevent="isCollapsed = !isCollapsed"
                                v-html="(isCollapsed) ? 'Show' : 'Hide'"
                        ></a>
                    </h2>
                </b-col>
                <b-col class="d-flex justify-space-around" v-if="showSearchBar">
                    <ContentSearchBar title="Search news"/>
                </b-col>
                <b-col class="d-flex justify-content-end">
                    <Toolbar controls="news" :display-sorter="false" v-if="!isCollapsed && news.length"/>
                </b-col>
            </b-row>
            <b-row v-if="!isCollapsed">
                <b-col
                        cols="12"
                        :sm="smCols"
                        :md="mdCols"
                        v-for="(item, index) in news"
                        :key="`news` + index"
                       :class="((index < numberNewsItems) || !numberNewsItems) ? `latest-news__col` : ``"
                >
                    <NewsItem
                            v-if="(index < numberNewsItems) || numberNewsItems === null"
                            :show-excerpt="showExcerpt"
                            :news="item"
                            :item-index="index"
                            :format="newsListFormat"
                    />
                </b-col>
            </b-row>
            <b-row v-if="news && news.length === 0 && isSearch && !isCollapsed">
                <b-col cols="12">There are no news item results for your search term "{{$route.params.query}}"</b-col>
            </b-row>
        </b-container>
    </section>
</template>

<script>
  import NewsItem from "./NewsItem";
  import ContentSearchBar from "./ContentSearchBar";
  import Toolbar from "./Toolbar";
  import store from '../store';
  import {mapGetters} from 'vuex';
  import NewsService from '../services/NewsService'

  export default {
    name: "LatestNews",
    store: store,
    props: {
      showExcerpt: {
        default: true,
      },
      showSearchBar: {
        default: false,
      },
      numberNewsItems: {
        default: null
      },
      'isSearch': {
        default: false
      },
    },
    data() {
      return {
        news: [],
        isCollapsed: false
      }
    },
    mounted() {
      if (this.isSearch) {
        this.searchNews()
      } else {
        this.getNews()
      }
    },
    methods: {
      async getNews() {
        const response = await NewsService.all()
        this.news = response.data
      },
      async searchNews() {
        let query = this.$route.params.query;
        const response = await NewsService.search(query);
        this.news = response.data.results
      }
    },
    components: {Toolbar, ContentSearchBar, NewsItem},
    computed: {
      blockTitle() {
        if (this.isSearch) {
          return 'News search results for "' + this.$route.params.query + '"'
        } else {
          return 'Latest News'
        }

      },
      ...mapGetters([
        'newsListFormat'
      ]),
      smCols() {
        if (this.newsListFormat === 'list') {
          return '12'
        } else {
          return '6'
        }
      },
      mdCols() {
        if (this.newsListFormat === 'list') {
          return '12'
        } else {
          return '3'
        }
      },
    }

  }
</script>

<style lang="scss">
    .latest-news {
        &__col {
            margin-bottom: 24px;
        }

        &__title-bar {
            margin-bottom: 20px;

            h2 {
                margin-bottom: 0;
            }
        }
    }
</style>

这就是 Chrome 开发工具在yarn serve编辑时显示 HTML 的方式

标签： vue.jsbootstrap-vue

vue.js - BootstrapVue - Bootstrap CSS 被多次添加到我的 Vue 应用程序中

问题描述

解决方案

推荐阅读