3

我想在 nuxt.js 中使用 Bootstrap，不使用 CDN 怎么办？我想在 nuxt.config.js 中使用引导文件，但我不能，我也想使用 jquery 文件和 popper.js 我试图将这些文件包含在 head 数组上，nuxt.config.js但它不起作用，并且我也尝试包含bootstrap.min.css在 CSS 数组中，幸运的是它起作用了，但是引导程序的 js 属性，如 Dropdown、Collapses 和类似的东西不起作用，我知道这些属性不起作用的原因，这是因为 Jquery 和 popper js 没有'不包括，但真的我怎么能包括他们？请帮我

4

3 回答 3

6

您可以使用 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'
      }
    ]
  }
}
于 2020-08-22T12:15:51.007 回答
3

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

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

其次，您使用 npm安装引导程序

npm install bootstrap@next

第三，进入您的资产文件夹，创建一个名为 scss 的文件夹，并在 scss 文件夹中创建一个 app.scss 或您希望的任何名称。第四，您使用 @import 从节点模块导入引导程序，即

@import "~bootstrap/scss/bootstrap";

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

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

这是我从 github bootstrap-nuxt做的一个项目的链接

于 2021-04-06T05:55:54.767 回答
-2

试试这个步骤：

  1. 使用此命令安装 Bootstrapnpm install bootstrap-vue

  2. 将此行添加到您的 nuxt.config.js

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

我希望我理解你的问题是正确的。有关更多信息，您可以查看文档的入门部分

于 2020-08-22T12:12:44.020 回答