引导模板在 nuxtjs 应用程序中不起作用

Question

您好，所有阅读此问题的人。我在我的项目 nuxtjs 中使用引导模板。 页眉和页脚正在显示，但问题是boday 中的模板设计没有显示。 我像这样在资产文件夹中添加了 CSS 和字体文件

我在静态文件夹中添加了Image和js文件

这是我的 nuxt.config.js 文件

export default {
   mode: 'universal',
  env: {

  },
  
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'algso-web',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo.gif' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900&display=swap' }
    ],
    script:[
    { src:"/js/aos.js" },
    { src:"/js/bootstrap.min.js" },
    {src: "/js/google-map.js"},
    {src: "/js/jquery-3.2.1.min.js"},
    {src: "/js/jquery-migrate-3.0.1.min.js"},
    {src: "/js/jquery.animateNumber.min.js"},
    {src: "/js/jquery.easing.1.3.js"},
    {src: "/js/jquery.magnific-popup.min.js"},
    {src: "/js/jquery.min.js"},
    {src: "/js/jquery.stellar.min.js"},
    {src: "/js/jquery.waypoints.min.js"},
    {src: "/js/main.js"},
    {src: "/js/owl.carousel.min.js"},
    {src: "/js/popper.min.js"},
    {src: "/js/scrollax.min.js"}
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/bootstrap/bootstrap-grid.css',
    '~/assets/css/bootstrap/bootstrap-reboot.css',
    '~/assets/css/animate.css',
    '~/assets/css/aos.css',
    '~/assets/css/bootstrap.min.css',
    '~/assets/css/flaticon.css',
    '~/assets/css/icomoon.css',
    '~/assets/css/ionicons.min.css',
    '~/assets/css/magnific-popup.css',
    '~/assets/css/open-iconic-bootstrap.min.css',
    '~/assets/css/owl.carousel.min.css',
    '~/assets/css/owl.theme.default.min.css',
    '~/assets/css/style.css'

  ],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
   
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

问题是士兵和旋转木马没有显示，也没有在网站正文中显示任何设计，这是我的主页设计文件

<template>
  <div>
    <section class="home-slider owl-carousel owl-theme">
      <div class="slider-item" style="background-image:url(/images/bg_1.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-md-7 ftco-animate">
            <span class="subheading">Welcome to ALGSO</span>
            <h1 class="mb-4">We Are The Best Services Provider</h1>
            <p><a href="#" class="btn  px-4 py-3 mt-3" style="background-color: #0FB1E2;"><span class="text-white">Our Services</span></a></p>
          </div>
        </div>
        </div>
      </div>

      <div class="slider-item" style="background-image:url(/images/bg_2.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-md-7 ftco-animate">
            <span class="subheading">Todays Talent, Tommorow Success</span>
            <h1 class="mb-4">We Help to Grow Your Business</h1>
            <p><a href="#" style="background-color: #0FB1E2;" class="btn text-white px-4 py-3 mt-3">Our Services</a></p>
          </div>
        </div>
        </div>
      </div>
    </section>
    <section class="ftco-section">
      <div class="container">
        <div class="row d-flex">
          <div class="col-md-5 order-md-last wrap-about align-items-stretch">
            <div class="wrap-about-border ftco-animate">
              <div class="img" style="background-image: url(images/about.jpg); border"></div>
              <div class="text">
                <h3>Our Mission</h3>
                <p>We believe that real development starts at the local and urban level and therefore our programs support professionals who strive to improve service delivery, support local economic development, and promote the rule of law at the local and urban level. Our mission is to be at the fore front in improving local governance and development in Afghanistan through researching, capacity building and projects design and implementation that lead to sustainable development and improved standards of living. </p>
                <p><a href="#" class="btn py-3 px-4" style="background-color: #0FB1E2;" ><span class="text-white">Contact us</span></a></p>
              </div>
            </div>
          </div>
          <div class="col-md-7 wrap-about pr-md-4 ftco-animate">
            <h2 class="mb-4">What we do ?</h2>
           <p>Afghanistan Local Governance Studies Organization is focusing on the following key areas.</p>
            <div class="row mt-5">
              <div class="col-lg-6">
                <div class="services active text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></span></div>
                  <img src="/images/Local goverment.png" width="100" height="80" alt="ALGSO">
                  <div class="text media-body">
                    <h3>Local Governance</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
                <div class="services  text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></div>
                  <img src="/images//election analysis.png" width="100" height="80" alt="ALGSO">
                  <div class="text media-body">
                    <h3>Election Analysis:</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>

              </div>
              <div class="col-lg-6">


                <div class="services text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></div>
                  <img src="/images//reserch.png" alt="ALGSO" width="100" height="80">
                  <div class="text media-body">
                    <h3>Research</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
                <div class="services text-center">
                  <div class="icon mt-2 d-flex justify-content-center align-items-center"></span></div>
                  <img width="100" height="80"  src="/images/e-gaverce.png"></img>
                  <div class="text media-body">
                    <h3>E-Governnace</h3>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

Answer 1

一个简单而干净的解决方案是直接为 Nuxt 加载 BootstrapVue，如 documentation 所示。

这将比从public 目录中导入一些静态代码更简单。

yarn add bootstrap-vue

nuxt.config.js

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}