我如何在 nuxtjs 上安装引导程序答案

【问题标题】：how can i install bootstrap on nuxtjs我如何在 nuxtjs 上安装引导程序
【发布时间】：2020-08-22 11:55:46
【问题描述】：

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

【问题讨论】：

请添加一些代码，这样更容易发现可能的错误。

标签： bootstrap-4 nuxtjs

【解决方案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'
      }
    ]
  }
}

【讨论】：

感谢回答，我知道如何使用CDN，但由于某些原因我不想使用它，我想使用手动文件，并且我在CSS中包含了bootstrap.min.css nuxt.config.js 上的数组它的工作，但我不知道如何包含 js 文件，这需要像 jquery 和 popper.js 这样的纯引导程序，通常用于 DropDown 和 Copllapse
@MohammadAli 只需将它们添加到static 文件夹中，并将 src 更改为我在回答中的编辑。
这里是如何接受答案：stackoverflow.com/help/….

【解决方案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 做的一个项目的链接

【讨论】：

【解决方案3】：

试试这个步骤：

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

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

我希望我正确理解了您的问题。更多信息，您可以查看documentation的入门部分

【讨论】：

感谢您的回答，但我不想使用 bootstrap-vue，因为它不支持 RTL，而且很难更改配置以支持 RTL