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

     2023-02-22     238

关键词:

【中文标题】如何在 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);

【讨论】:

Nuxt.js + Bootstrap-Vue - 加载单个组件和指令

】Nuxt.js+Bootstrap-Vue-加载单个组件和指令【英文标题】:Nuxt.js+Bootstrap-Vue-Individualcomponentsanddirectivesloading【发布时间】:2018-12-1711:16:25【问题描述】:我正在努力将Bootstrap-Vue库集成到我的基于Nuxt.js的项目中。我通读了officialdocument... 查看详情

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】:Howtodefinerouteinnuxt.js【发布时间】:2019-04-2421:11:53【问题描述】:我有一个使用Nuxt.Js的博客网站,假设xyz.com并希望显示特定国家/地区代码的所有页面,例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】:howtowriteglobalrouter-functioninnuxt.js【发布时间】:2018-01-1213:11:55【问题描述】:我正在将Vue.js与Nuxt.js一起使用,但路由器的功能出现问题。在纯Vue中,我可以这样写main.js:valroute... 查看详情

Tabulator + Nuxt.js:如何在回调中使用 axios?

】Tabulator+Nuxt.js:如何在回调中使用axios?【英文标题】:Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】:2020-01-1608:48:53【问题描述】:我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件:<template><divref="table... 查看详情

如何使用 laravel 后端 API 在 nuxt.js 中上传图片

】如何使用laravel后端API在nuxt.js中上传图片【英文标题】:howtouploadimageinnuxt.jsusinglaravelbackendAPI【发布时间】:2021-01-2407:29:30【问题描述】:nuxt.js我搜索了很多关于使用laravelapi上传图片的教程,但我不知道如何编码图片上传的东... 查看详情

如何使用 Nuxt.js 仅在一个组件中使用插件?

】如何使用Nuxt.js仅在一个组件中使用插件?【英文标题】:HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】:2021-11-1617:45:13【问题描述】:我正在用nuxt.js做一个简单的博客网站,我只需要在一个组件中导入编辑器,我不想使用n... 查看详情

如何在实际服务中运行 nuxt.js?

】如何在实际服务中运行nuxt.js?【英文标题】:Howtorunnuxt.jsinrealservice?【发布时间】:2017-10-2817:56:32【问题描述】:我在中使用了vue-clivueinitnuxt/expressmyProject和,npm运行开发开发。但是,npm运行构建之后,创建了dist文件。如何在... 查看详情

如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】:HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】:2021-01-2106:39:49【问题描述】:我有插件swiper.js代码:importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】:HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】:2020-08-1503:00:36【问题描述】:在Vue.js中,这是我使用的设置。在Nuxt.js中,我收到“未定义窗口”错误。根据我的... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签?

】如何在nuxt.js(vue.js)中配置动态og标签?【英文标题】:HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】:2018-05-3112:59:18【问题描述】:我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

如何在nuxt js中声明条件语句

】如何在nuxtjs中声明条件语句【英文标题】:Howtodeclareconditionstatementinnuxtjs【发布时间】:2020-04-2013:29:09【问题描述】:我在nuxtjs中使用WordpressAPI显示数据。我尝试在类别明智的示例中显示数据,其中(\'post.category\',\'=\',\'categoryNa... 查看详情

如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath?

】如何在Nuxt.js的axios插件中访问当前的fullPath?【英文标题】:HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】:2020-02-0807:01:42【问题描述】:我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】:Howtotesthead()innuxt.jsusingjest【发布时间】:2020-05-1418:26:53【问题描述】:我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题,我想对其进行单元测... 查看详情

如何在 Nuxt JS 中异步全局 Mixin 数据?

】如何在NuxtJS中异步全局Mixin数据?【英文标题】:HowtoasyncglobalMixindatainNuxtJS?【发布时间】:2021-08-2302:33:45【问题描述】:首先,让我分享一下我的工作流程。在我的nuxt应用程序中,我试图通过获取用户的窗口宽度来跟踪用户... 查看详情

如何在 Nuxt 中拥有像 turn.js 这样的翻书?

】如何在Nuxt中拥有像turn.js这样的翻书?【英文标题】:Howtohaveaflipbookliketurn.jsinNuxt?【发布时间】:2021-12-2015:34:39【问题描述】:如何将turn.js导入nuxt.js项目。当我通过插件使用时,错误窗口未定义,即使我在客户端模式下使用... 查看详情

如何在 nuxt js 中使用 vuetify 作为插件?

】如何在nuxtjs中使用vuetify作为插件?【英文标题】:Howtousevuetifyinnuxtjsasplugin?【发布时间】:2020-04-2321:43:53【问题描述】:我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify,但得到错误无法分配给对象“#”的... 查看详情

如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

】如何使用Nuxt.js在vuex状态中获取本地存储数据【英文标题】:HowtogetlocalstoragedatainsidevuexstatewithNuxt.js【发布时间】:2019-06-1113:32:09【问题描述】:我正在使用Nuxt构建一个购物车。但是当我刷新页面时,购物篮会自动清空。我尝... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】:Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】:2017-10-2807:01:42【问题描述】:我在Nuxt.js(Vue.js)中开发网络应用程序首先,vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情