有沒有辦法在導入 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

我不確定你在問什么，但如果你只是想模塊化，你可以用 import 來做到這一點。 做到這一點的方法是將組件導入到組件中。

如果您有一個分頁組件要導入到您的應用程序中，您可以將一個較小的組件（一個子組件）導入到分頁組件中。 您可以通過這種方式將 go 盡可能小，並具有子子子組件。 將組件導入組件的語法與將組件導入新的 vue 頁面的語法相同。

除非我遺漏了什么，否則沒有理由嘗試使用 require。 Vue 已經為您提供了導入組件所需的一切。 這是在 Vue 中模塊化和保持代碼 DRY 的正確方法。