无法在nuxt vue组件中导入引导程序[重复]

Posted 2023-02-22

【中文标题】无法在nuxt vue组件中导入引导程序[重复]

【英文标题】：Cannot import bootstrap in nuxt vue component [duplicate]

【发布时间】：2020-07-12 14:43:38

【问题描述】：

我无法在任何 vue 组件中导入引导程序（使用最新的 nuxtjs）。我明白了：

我的（简单）组件是：

<template>
  <h1>Empty index page</h1>
</template>

<script>
import Modal from 'bootstrap/js/src/modal'

export default 
</script>

<style></style>

我真的被困住了。您有什么想法或建议吗？

【问题讨论】：

这能回答你的问题吗？ "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

使用 bootstrap-vue，这里是文档：bootstrap-vue.js.org/docs/#nuxtjs-module

【参考方案1】：

你应该使用 bootstrap-vue，他们解决了很多问题，而且他们的 tree-shacking 效果惊人。

您的代码将是

<template>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button> 
  <b-modal id="modal-1" title="BootstrapVue" >
    <h1>Empty index page</h1>
  </b-modal>
</template>

<script>
  import  BModal, BButton  from 'bootstrap-vue'

  export default 
    name: "Modal Component",
    components: 
      'b-modal': BModal,
      'b-button': BButton
    
  
</script>

<style></style>

更多信息在bootstrap-vue guide