导入 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全局注册组件(请参阅 api 文档(：

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

如果您有多个组件都将使用SomeComponent，这是一个不错的选择。

Answer 2

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

如果您有要导入到应用的分页组件，则可以将较小的组件(子组件(导入分页组件。 您可以通过这种方式尽可能小，并拥有子子组件。 将组件导入组件的语法与将组件导入新的 vue 页面的语法相同。

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