Vue：仅特定页面的组件

Posted 2023-02-23

【中文标题】Vue：仅特定页面的组件

【英文标题】：Vue: Component for specific pages only

【发布时间】：2021-06-27 12:45:46

【问题描述】：

我在我的 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 文件中添加编辑器组件。

【问题讨论】：

你不能只在布局中使用 twig 参数，例如对于所有使用编辑器的扩展页面都是如此，然后你将它分配给一个 js 变量，并且在应用程序 js 中你只做它的东西真的吗？

【参考方案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'
);

【讨论】：

简单而简单的答案 - 不知道我是怎么错过的。非常感谢，像魅力一样工作