Question

我正在尝试将https://mdbootstrap.com/vue/中的材料设计集成到我的NuxtJS项目中，但我没有找到关于如何将其添加到nuxt的任何指示。

对于bootstrap-vue，我将其添加到我的nuxt.config.js中，如下所示：

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

但它似乎不适用于mdbootstrap。

Answer 1

如果您拥有一个nuxt项目，那么您要做的就是

yarn add mdbvue bootstrap-css-only 要么 npm install mdbvue bootstrap-css-only

...然后编辑您的 nuxt.config.js ，以便它添加必要的样式并转换库的ES6：

  css: [
   'bootstrap-css-only/css/bootstrap.min.css',
   'mdbvue/build/css/mdb.css'
  ]
  ...
  build: {
    extend(config, ctx) {},
    transpile: [
      'mdbvue'
    ]
  }

瞧瞧！ Checkout out the official guide了解更多详细信息，今天就开始在Nuxt中使用MDB！

最佳

Answer 2

您可以像使用自己的组件一样使用它们的组件 - 只需将它们导入到您需要的任何位置，然后在components属性下声明它们：

import Breadcrumb from '<path-to-mdbootstrap-vue>/components/Breadcrumb.vue';

export default {
  name: 'BreadcrumbPage',
  components: {
    Breadcrumb,
  },
};

如果我可以添加 - 您可能会更好地使用一些更受欢迎的材料设计Vue实现，例如vuetify或vue-material。

我不想听起来太过评判，因为我还没有使用过您正在使用的项目，但它看起来有点不太成熟，特别是因为它告诉您只需下载文件直接而不是使用npm或yarn等包管理器，这通常是首选方式。

MdBootstrap集成到NuxtJS项目中

2 个答案: