Nuxtjs 自定义模块

Question

我对 Nuxtjs 很陌生，所以我做了一个测试项目，其目的仅仅是（当然）测试 Nuxtjs 功能。

目前我正在尝试创建一个简单的自定义模块：据我所知，模块基本上是 vou/js 库/插件的包装器，类似于用于公开如何导入底层库/插件的配置的高级集成，以及在 Nuxt 应用程序中使用。

所以我尝试使用一个简单的模块来声明一些我将在应用程序中使用的普通 js 类，例如

Order

和

Product

，这就是我得出的结果：

目录结构

pages
  the-page.vue
modules
  classes
    index.js
    order.js

/模块/类/index.js

const path = require('path')

export default function (moduleOptions) {
    const { nuxt } = this

    // add the debug plugin
    this.addPlugin({
        src: path.resolve(__dirname, 'order.js'),
    })
}

/模块/类/order.js

class Order {
    constructor(id) {
        this.id = id;

        console.log('created order #' + this.id);
    }
}

export {Order};

/nuxt.config.js

export default {
  // ...
  buildModules: [
    // ...
    '~/modules/classes'
  ],
  // ...
}

/pages/the-page.vue

<script>
export default {
  name: 'ThePage',
  data () {
    return {
    }
  },
  methods: {
    createOrder () {
      const order = new Order(123)
    }
  }
}
</script>

错误

我定义的类仍未导入到我的页面中：

/app/pages/the-page.vue
  18:13  error  'order' is assigned a value but never used  no-unused-vars
  18:25  error  'Order' is not defined                      no-undef

注意事项

可能我遗漏了一些关于模块使用和/或实现的内容，但是我发现的每个教程都是从过于复杂的场景开始的，而且由于我刚开始使用 Nuxtjs，所以我需要一些更容易实现的东西。

Answer 1

好吧，我发现我错误地理解了 NuxtJs 模块的工作原理，并且试图做一些它们不该做的事情。

Nuxt 模块无法像我想要的那样在应用程序的每个组件中导入 js 类，它们只是向可通过

this.$<something>

访问的主应用程序实例“添加一个属性”，例如您已经可以在简单的 Vue 中使用 Vue Router 或 Vuex 存储插件来访问

this.$router

和

this.$store

属性。

NuxtJs 模块仅包装简单的插件并公开配置选项。

Answer 2

在尝试上述代码时，出现错误“无法重新启动 nuxt：无法将对象转换为原始值”