代码之家 › 专栏 › 技术社区 › Andrew Bogdanov

nuxt.js+bootstrap vue-加载单个组件和指令

bootstrap-vue nuxt.js bootstrap-4 vue.js

1

Andrew Bogdanov · 技术社区 · 6 年前

我正在将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)

2 回复 | 直到 6 年前

1

3

Andrew Bogdanov 6 年前

在对bt vue库进行了大量研究和修复之后,我找到了解决这一难题的方法。此解决方案旨在 文本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)

我们将只导入我们想要使用的组件。有关这方面的更多信息,请参见下面的bt vue文档 组件组和指令作为vue插件

警告: 我建议不要使用这种导入语法:

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

因为它会把里面的东西 components 不管怎样,指令并用额外的js代码污染您的最终捆绑包,因为它不会被正确的树摇动(webpack bug),这可能会破坏这种设置的整个目的,所以使用上面所述的显式导入。

然后在nuxt.config.js中连接它:

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

正如你所看到的,没有必要包含一个模块,因为我们正在编写一个插件,因此没有问题的ssr!我们正在使用新的nuxt 2 transpile 属性来构建我们的ES6 BT Vue模块。不要忘记包含对css的引用,因为它是单独的。在我的设置中,我只是直接从index.scss文件中的常规引导包导入sass文件,并像往常一样将其包含在nuxt.config.js中。

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

2

0

Andrew Bogdanov 5 年前

因为版本2.0.0-rc.14使用bootstrapvue和nuxt得到了极大的简化,因为引入了内置的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组件的scs感到好奇:

@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";