正文 

当前位置： 首页 > 问答 >

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

     2023-02-22     283

关键词：

【中文标题】Nuxt.js + Bootstrap-Vue - 加载单个组件和指令【英文标题】：Nuxt.js + Bootstrap-Vue - Individual components and directives loading 【发布时间】：2018-12-17 11:16:25 【问题描述】：

我正在努力将 Bootstrap-Vue 库集成到我的基于 Nuxt.js 的项目中。我通读了official documentation 以开始使用，但是尽管将 bt-vue 作为单个模块导入工作正常，但我希望能够导入单个组件和指令以减小生成的文件大小并使我的设置尽可能高效。文档仅针对该主题的常规 Vue.js 项目提供了解决方案，但我如何编写一个插件来使我能够对 Nuxt 做同样的事情？

我开始像这样创建一个bt-vue.ts 插件：

import Vue from 'vue'
import  Card  from 'bootstrap-vue/es/components';

Vue.use(Card);

我已将此文件导入到 nuxt.config.js 插件部分

plugins: [
...
'@/plugins/bt-vue'
...
]

但是当我尝试编译我的项目时，我收到了这个错误：

node_modules\bootstrap-vue\es\components\index.js:1
  (function (exports, require, module, __filename, __dirname)  import Alert from './alert';
  ^^^^^^

  SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (C:\Projects\Wonder\frontend-nuxt\node_modules\vue-server-renderer\build.js:8330:16)
  at Object.bootstrap-vue/es/components (server-bundle.js:5771:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/bt-vue/index.ts (plugins/bt-vue/index.ts:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

【问题讨论】：

你能从 clarcdo 试试这个解决方案吗：向外部添加 dom-classes ---- const nodeExternals = require('webpack-node-externals') module.exports = build: extend(config , ctx) if (ctx.isServer) config.externals = [ nodeExternals( whitelist: [/^dom-classes/] ) ] 什么是 dom 类？我应该为此创建一个单独的模块吗？是否可以与 Webpack 4 一起使用？也许我可以使用 extendBuild 功能？ 【参考方案1】：

经过大量研究和对 bt-vue lib 的一些修复后，我找到了应对这一挑战的解决方案。 此解决方案适用于 Nuxt 2，而 不会与 Nuxt 1 一起使用： 首先你需要创建一个插件：

import Vue from 'vue'
import Collapse from 'bootstrap-vue/es/components/collapse'
import Dropdown from 'bootstrap-vue/es/components/dropdown'

Vue.use(Collapse)
Vue.use(Dropdown)

我们将只导入我们想要使用的那些组件。更多信息可以在 Component groups and Directives as Vue plugins

下的 bt-vue 文档中找到

警告：我建议远离这种导入语法：

import Modal from 'bootstrap-vue/es/components';

因为它无论如何都会导入 components 指令中的所有内容，并用额外的 JS 代码污染你的最终包，因为它不会正确地摇树（webpack 错误），这可能会破坏这种设置的全部目的，所以使用如上所述的显式导入。

然后在 nuxt.config.js 中连接：

export default 
  build: 
    transpile: ['bootstrap-vue']
  ,
  plugins: ['@/plugins/bt-vue']

正如您所见，不需要包含模块，因为我们自己编写插件，因此 s-s-r 没有问题！我们正在使用新的 Nuxt 2 transpile 属性来构建我们的 es6 bt-vue 模块。不要忘记包含对 css 的引用，因为它是单独提供的。在我的设置中，我只是将常规引导程序包中的 SASS 文件直接导入到我的 index.scss 文件中，然后像往常一样将其包含在 nuxt.config.js 中。

css: [
    '@/assets/scss/index.scss'
  ]

【讨论】：

插件导入开始时需要import Vue from 'vue'的小提醒 它在那里，不是吗？【参考方案2】：

从 2.0.0-rc.14 版开始，使用带有 Nuxt 的 BootstrapVue 得到了极大的简化，因为引入了内置的 Nuxt 模块，无需手动创建插件。 为了获得与上面相同的结果，您只需要在 nuxt.config.js 中注册一个 bt-vue 模块以及一些特殊设置：

modules: ['bootstrap-vue/nuxt'],
bootstrapVue: 
    bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
    bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
    componentPlugins: ['Collapse', 'Dropdown'], // Here you can specify which components you want to load and use
    directivePlugins: [] // Here you can specify which directives you want to load and use. Look into official docs to get a list of what's available

如果您对如何加载特定 bt-vue 组件的 scss 感到好奇：

@import "~bootstrap-vue/src/variables";
// All bt-vue styles can be imported with this reference
//@import "~bootstrap-vue/src/components/index";

// Importing only styles for components we currently use
@import "~bootstrap-vue/src/components/dropdown/index";

【讨论】：

最新的 BootstrapVue nuxt 插件现在允许导入单个组件和指令。

nuxt的介绍以及入门(代码片段)

1.Nuxt.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVu... 查看详情

Nuxt.js：消息：“找不到此页面”（nuxt-i18n）

】Nuxt.js：消息：“找不到此页面”（nuxt-i18n）【英文标题】：Nuxt.js:message:\'Thispagecouldnotbefound\'(nuxt-i18n)【发布时间】：2019-03-0305:02:59【问题描述】：在我的Nuxt.js应用程序中，我根据documentation的建议安装了nuxt-i18n：modules:[[\'nuxt-i... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

Nuxt.js：理解 <nuxt-child> 组件

】Nuxt.js：理解<nuxt-child>组件【英文标题】：Nuxt.js:understanding<nuxt-child>component【发布时间】：2019-03-0923:53:44【问题描述】：在Nuxt.js中，我做了这个文件夹结构：├──parent│  ├──child1.vue│  └──child2.vue├──par... 查看详情

Vue.js 和 Nuxt.js

】Vue.js和Nuxt.js【英文标题】：Vue.jsandNuxt.js【发布时间】：2018-06-1008:46:16【问题描述】：您好，首先感谢那些回答这个问题的人。这个问题可能愚蠢问。我正在将我的水疗中心从vue.js切换到vue.js提供的nuxt，但现在写到我很麻烦，... 查看详情

nuxt.js + Apollo Client：如何禁用缓存？

】nuxt.js+ApolloClient：如何禁用缓存？【英文标题】：nuxt.js+ApolloClient:Howtodisablecache?【发布时间】：2019-12-1608:10:10【问题描述】：我设法获得了一个运行typescript和apollographql的nuxt.js+nest.js。为了测试graphql是否有效，我使用了来自this... 查看详情

Nuxt.js 仅客户端组件

】Nuxt.js仅客户端组件【英文标题】：Nuxt.jsClient-SideOnlyComponent【发布时间】：2021-04-1115:25:32【问题描述】：我在我的Nuxt.js项目中使用plotly.js，但在导入plotly.js时，我一直收到错误消息documentnotdefined。Nuxt.js文档没有提供关于如何... 查看详情

Nuxt.js：页面转换

】Nuxt.js：页面转换【英文标题】：Nuxt.js:pagetransitions【发布时间】：2021-03-2300:08:40【问题描述】：在我的nuxt.config.js中，我添加了loading:\'~/components/LoadingBar.vue\'。部署站点后，我的自定义页面转换工作，但仅当访问的第一个页面... 查看详情

Nuxt.js：未定义窗口

】Nuxt.js：未定义窗口【英文标题】：Nuxt.js:windowisnotdefined【发布时间】：2021-01-1507:39:04【问题描述】：我正在使用Nuxt.js。设置vuex-persist时出现以下问题。有人可以帮我吗？存储/index.js存储/LangModule.js【问题讨论】：你不能在存储... 查看详情

nuxt.js -> v-bind 到 <nuxt> 的 props

】nuxt.js->v-bind到<nuxt>的props【英文标题】：nuxt.js->v-bindtopropsof<nuxt>【发布时间】：2017-08-2309:29:24【问题描述】：我做了一个nuxt.js项目。我正在尝试将数据传递给组件（nuxt）。在我的第一个vue文件中，我有这段代码&l... 查看详情

如何更新 vuetify mdi 图标？ (Nuxt.js)

】如何更新vuetifymdi图标？(Nuxt.js)【英文标题】：Howtoupdatevuetifymdiicons?(Nuxt.js)【发布时间】：2020-06-0618:07:45【问题描述】：我在Nuxt.js上使用Vuetify。但我不能使用一些材料设计图标。例如&lt;v-icon&gt;mdi-cog&lt;/v-icon&gt;显... 查看详情

nuxt.js设置代理接口

参考技术A1、安装@gauseen/nuxt-proxy包依赖cnpminstall@gauseen/nuxt-proxy--save2.设置nuxt.config.js修改modules为modules:["@gauseen/nuxt-proxy"]3.增加proxyTable属性proxyTable:"/api":target:'https://xxxxx.com',changeOrigin:true,ws:false,pathRewrite:"^/... 查看详情

nuxt.config.js 中的条件属性

】nuxt.config.js中的条件属性【英文标题】：Conditionalattributeinnuxt.config.js【发布时间】：2019-08-1615:13:30【问题描述】：我正在开发一个使用nuxt.js的网站，并且希望有条件地在nuxt.config.js中有一个配置选项：我想更改路由器我运行npmr... 查看详情

如何向 Nuxt.js 添加客户端脚本？

】如何向Nuxt.js添加客户端脚本？【英文标题】：HowtoAddClient-sideScriptstoNuxt.js?【发布时间】：2018-06-2312:39:34【问题描述】：我一直在阅读Nuxt.js关于插件的文档和用于添加脚本的配置nuxt文件。我都试过了，但没有运气。我正在尝试... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

nuxt.js的学习(代码片段)

1、下载nuxt.js的脚手架npminstall-gcreate-nuxt-app这个命令默认下载的是最新版，现在的最新版是3.7.1，而我学习的是2.15.0，所以我需要指定版本安装（方便学习） 下载指定nuxt.js的版本npminstall-gcreate-nuxt-app@v2.15.0... 查看详情

Nuxt.js 安装错误

】Nuxt.js安装错误【英文标题】：Nuxt.jsInstallationErrors【发布时间】：2020-04-1908:03:47【问题描述】：我现在尝试安装nuxt-app应用程序几次。我已经在我的终端中使用npm和yarn运行它，并在powershell中作为管理员运行它。我在创建应用程... 查看详情

Nuxt.js + vuetify 图像未加载

】Nuxt.js+vuetify图像未加载【英文标题】：Nuxt.js+vuetifyimagenotloading【发布时间】：2020-07-2515:22:12【问题描述】：我正在使用Nuxt.js+Vuetify，但图像无法加载到我的下一页文件中。例如，在我的./pages/browse/index.vue中，我有一个像这样的... 查看详情