VueJS-将单独的组件加载到vue实例中

Question

在我的工作中，我目前正在重新设计Web平台，包括将许多旧的 javascript / jquery 移至 VueJS 。

我有一个global.js文件，其中包含我们的 Vue 组件，而我们有一个vendor.js文件，其中包含 Vue，Axios，Vuex ......

现在我们的网站上有一个文本编辑器，此编辑器具有 Vue 版本。问题在于该文本编辑器很大，几乎被压缩了 500kb 用于生产。因此，我为此编辑器在单独的文件中创建了单独的组件，因为我们只需要两页即可。

现在，由于我的全局 Vue 占据了整个页面，因此我无法将文本编辑器插入其中，因为您无法将 Vue 实例放置在另一个中Vue 实例。

有没有一种方法可以将编辑器保留为一个完全独立的文件，但是在页面上加载全局 Vue 实例时会以某种方式使用它？

我已经搜索了很多，但是没有在任何地方遇到这个问题。也许不可能做到这一点。

Answer 1

您可以将编辑器的CSS修改为position:fixed或position:absolute，然后将其放入应用程序组件中。然后使用v-if切换可见性。

您还可以使用第3方对话框组件来包装编辑器，以将其包装到模式弹出窗口中。

---

另一个不相关的建议是，如果组件较大，则使用延迟加载。

Answer 2

尝试异步加载TextEditor.vue。

new Vue({
  // ...
  components: {
    TextEditor: () => import("./TextEditor.vue")
  }
})

Reference

Answer 3

您可以在另一个 Vue 实例中放置一个 Vue 实例。

假设我有以下HTML

<div id="main-app"></div>

new Vue({
  el: "#main-app",
  template: `<div>
        This is my main application which has an editor div
        <div id="editor"></div>
     </div>`
});

new Vue({
  el: "#editor",
  template: `<div>
        This is my editor component
     </div>`
});

最终的HTML将是

<div>
  This is my main application which has an editor div
  <div>
    This is my editor component
  </div>
</div>

Answer 4

您可以通过imports文件中的components和.vue属性将多个Vue文件合并在一起。

<template>
   <div>
      <TextEditor></TextEditor>
   </div>
</template>

<script>
import TextEditor from 'path/to/TextEditor.vue';

export default {
   name: 'Main',
   components: {
      TextEditor
   }
}
</script>

此外，您可以将其设置为动态导入。如果您的项目是使用vue-cli设置的，则应该已经安装了webpack。在这种情况下，您还可以将动态导入设置为以下两种类型之一：prefetch or preload。本质上，当应用程序空闲时，预取会下载文件，而预加载会与主要组件并行下载。实现这些方面中的任何一个最终都看起来像这样：

export default {
   name: 'Main',
   components: {
      TextEditor: import(/* webpackPrefetch: true */ 'path/to/TextEditor.vue')
      /* OR */
      // TextEditor: import(/* webpackPreload: true */ 'path/to/TextEditor.vue')
   }
}

Answer 5

您应该看一下将捆绑包分成几块：https://webpack.js.org/guides/code-splitting/

仅将文本编辑器块加载到需要它的页面上。