Vue：仅特定页面的组件

Question

我在我的 Symfony 项目中使用 Vue.js (2)，目前我的 Vue 实例带有“全局”组件（在我的例子中称为带有一些 CKEditor 库的编辑器）使用默认的 symfony webpack 预编译。

//app.js
import Vue from 'vue';
import Editor from './components/Editor';

new Vue({
    el: '#app',
    components: {Editor}
});

//components/Editor.vue
<template>
    <div>
        <textarea id="editor"></div>
    </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
//tons of other imports 

export default {
    name: "Editor",
    mounted() {
        ClassicEditor.create(document.querySelector('#editor'), 
            plugins: [
                Essentials,
                Heading,
                //more plugins used from imports
            ],
            toolbar: [
                'heading',
                //more plugins
            ],
        }).then(editor => {
           
        }).catch(error => {
           
        });
    }
}
</script>

由于我只有一个 Vue 实例，并且默认情况下包含每个组件，所以我的 Editor.vue 可以全局使用。然而这意味着，我的Editor.vue 实际上是在每个页面请求上默认加载的——即使你根本不需要编辑器。

现在编辑器本身有很多导入（因为我自定义了很多）。这会导致一个包含所有内容的相当大的 javascript 文件 - 这再次增加了加载时间。

我的目标是以某种方式删除全局组件Editor 并将其嵌入另一个名为editor.js 的javascript 文件中。该文件以后可以包含在特定页面中。

但是我不确定如何实现这一目标。我的 Vue 实例是在我的 app.js 中创建的，我需要在我的 editor.js 文件中添加编辑器组件。

Answer 1

这应该很简单。只需制作一个Editor 组件async component

Webpack 会自动将异步组件打包为单独的 js 块，并仅在需要时按需加载...

您可以在本地注册组件（在每个要使用的组件中）：

export default {
  name: "ComponentUsingEditor",
  components: {
    'Editor': () => import('components/Editor.vue')
  }
)

或全局：

app.js

import Vue from 'vue';

Vue.component(
  'Editor',
  () => import('components/Editor.vue')
)

new Vue({
    el: '#app'
});