Question

我想在nuxt.js中使用Bootstrap，如何在不使用CDN的情况下做到这一点？我想在nuxt.config.js中使用引导文件，但我不能，也想使用jquery文件和popper.js 我尝试将这些文件包含在nuxt.config.js的head数组中，但是它不起作用，而且我尝试将bootstrap.min.css包含在CSS数组中，还好它可以工作，但是bootstrap的js属性（例如Dropdown），崩溃和类似的东西不起作用，我知道这些属性不起作用的原因，这是因为Jquery和popper js不包括在内，但实际上我该如何包括它们？请帮助我，我几乎对nuxt感到失望

Answer 1

您可以使用bootsrap-vue，或者如果您想使用纯自举，则可以添加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 2

这是我发现在 Nuxt Js 中安装引导程序的一种方法首先，您需要使用

安装 sass 和 sass 加载程序包

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

其次，您使用 npm 安装 bootstrap

npm install bootstrap@next

第三，进入你的assets文件夹，创建一个名为scss的文件夹，然后在scss文件夹中创建一个app.scss或者任何你想要的名字第四，使用@import 从节点模块导入引导程序

@import "~bootstrap/scss/bootstrap";

第五，您转到 nuxt.config.js 并添加您使用创建的 scss 文件，

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

这里是我在 github 上做的一个项目的链接 bootstrap-nuxt

Answer 3

尝试以下步骤：

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

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

希望我能正确理解你的问题。有关更多信息，您可以检查documentation

的“入门”部分

如何在nuxtjs上安装bootstrap

3 个答案: