有没有办法在导入 VueJS 组件时使用 RequireJS？

Question

我有一个使用 RequireJS 和 Vue 组件的项目。我正在尝试将 Vue 组件模块化为更小的部分，并且我希望能够导出更小的 Vue 组件，以便它们可以被更大的组件使用。使用标准 vue 很简单：

import SomeComponent from './SomeComponent.vue'

new Vue({
     el: '#app',
     ...
     components: { SomeComponent },
     ...
}

但是如何使用 requireJS 来完成呢？

Answer 1

我不太确定你在问什么，但如果你只是想模块化，你可以通过导入来做到这一点。方法是将组件导入组件。

如果您有一个正在导入到您的应用程序的分页组件，您可以将一个较小的组件（子组件）导入到分页组件中。您可以通过这种方式尽可能小，并拥有子组件。将组件导入组件的语法与将组件导入新的vue页面的语法相同。

除非我遗漏了什么，否则没有理由尝试使用 require。 Vue 已经为您提供了导入组件所需的一切。这是在 Vue 中模块化和保持代码干燥的正确方法。

Answer 2

您可以使用 require 导入您的 *.vue 组件，如下所示：

new Vue({
  el: '#app',
  ...
  components: {
    'some-component': require('../path/to/components/SomeComponent.vue').default,
    ...
  },
  ...
});

您的 *.vue 文件的结构应如下所示：

<template>

  <!-- Component HTML  -->

</template>

<script>
  export default {
    name: 'some-component',
    ...
  }
</script>

<style>

  /* Component Styles */

</style>

作为替代方案，您可以使用 require 全局注册您的组件 (see api docs):

Vue.component('some-component', require('../path/to/components/SomeComponent.vue').default);

new Vue({
  el: '#app',
  ... // no need to declare `SomeComponent` here
});

如果您有多个组件都将使用 SomeComponent。

，这是一个不错的选择

有没有办法在导入 VueJS 组件时使用 RequireJS？

Is there a way to use RequireJS when importing VueJS components?

javascript

requirejs

vue.js