我如何在 nuxtjs 上安装 bootstrap

Question

我想在nuxt.js中使用Bootstrap，不使用CDN怎么办？我想在 nuxt.config.js 中使用 bootstrap 个文件，但我不能，我还想使用 jquery 个文件和 popper.js 我试图将这些文件包含在 nuxt.config.js 的头数组中，但它不起作用，我还尝试将 bootstrap.min.css 包含在 CSS 数组中，幸运的是它起作用了，但是 js [= bootstrap 中的 24=] 像 Dropdown、Collapse 之类的东西不起作用，我知道这些属性不起作用的原因，因为 Jquery 和 popper js 不包括在内，但是真的我怎么能包括他们？请帮助我

Answer 1

试试这个步骤：

使用此命令安装 Bootstrap npm install bootstrap-vue
将此行添加到您的 nuxt.config.js

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

希望我理解你的问题。有关详细信息，您可以查看 documentation

的入门部分

Answer 2

您可以使用 bootsrap-vue 或者如果您想使用纯 bootstrap 您可以添加 CDN 或下载文件手动添加它们：

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: '/jquery-3.5.1.slim.min.js'
      },
      {
        src: '/popper.min.js'
      },
      {
        src: '/bootstrap.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: '/bootstrap.min.css'
      }
    ]
  }
}

Answer 3

这是我找到的在 Nuxt Js 中安装 bootstrap 的方法首先，您需要使用

安装 sass 和 sass 加载程序包

npm install --save-dev sass sass-loader@10 fibers

其次，您使用 npm

安装 bootstrap

npm install bootstrap@next

第三，进入您的资产文件夹创建一个名为 scss 的文件夹，并在 scss 文件夹中创建一个 app.scss 或您想要的任何名称第四，使用

的 @import 从节点模块导入 bootstrap

@import "~bootstrap/scss/bootstrap";

第五，您转到 nuxt.config.js 并添加您使用

创建的 scss 文件

{ src: '~/assets/scss/app.scss', lang: 'scss' },

这是我从 github bootstrap-nuxt

做的一个项目的 link

我如何在 nuxtjs 上安装 bootstrap

how can i install bootstrap on nuxtjs

bootstrap-4

nuxtjs