如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

Posted 2023-02-22

【中文标题】如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

【英文标题】：How to cherry-pick bootstrap-vue.js modules in nuxt.js?

【发布时间】：2019-04-05 12:03:04

【问题描述】：

我无法理解如何在 nuxt.js 中挑选 bootstrap-vue.js 模块

nuxt.config.js 中的以下代码正在拉取整个库（不包括 css），但如上所述如何包含所需的模块。

modules: [
  ['bootstrap-vue/nuxt',  css: false ]
]

我在这里指的是文档：

https://bootstrap-vue.js.org/docs/ 请查看Individual components and directives 部分。 https://nuxtjs.org/guide/modules/#provide-plugins

上面文档中描述的事情让我头疼了 :) 请帮忙，谢谢。

【参考方案1】：

如果你想挑选模块，你不需要 bootstrap-vue/nuxt 模块。您需要按照“单个组件和指令”中的说明导入和使用组件 ' 部分。或者创建一个插件文件，您可以在其中全局注册它们。

 plugins: [
    '@/plugins/mybs',
  ],

还有里面的插件

import Vue from 'vue'

import bModal from 'bootstrap-vue/es/components/modal/modal'
import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'

Vue.component('b-modal', bModal);
Vue.directive('b-modal', bModalDirective);