Question

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

import SomeComponent from './SomeComponent.vue'

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

但是使用requireJS怎么办？

Answer 1

您可以使用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的组件，则这是一个不错的选择。

Answer 2

我不确定您要问的是什么，但是如果您只是想模块化，则可以使用import进行。完成此操作的方法是将组件导入到组件中。

如果您有要导入到应用程序中的分页组件，则可以将较小的组件（子组件）导入到分页组件中。您可以按照这种方式缩小自己的大小，并具有子子子组件。将组件导入组件的语法与将组件导入新的vue页面相同。

除非我缺少任何东西，否则没有理由尝试使用require。 Vue已经能够为您提供导入组件所需的一切。这是将代码DRY模块化并保持在Vue中的正确方法。

导入VueJS组件时是否可以使用RequireJS？

2 个答案: