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

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，那么这是一个不错的选择。