Question

我有一个概念，我试图找到最好的方法。我正在使用VueJS和webpack 2.我的方案是我希望有一个组件列表，我想在用户点击项目时按需加载。例如，我在一个数组中列出了5个组件（YouTube，Facebook，Twitter，Pandora，Spotify）。我使用v-for使用LI元素重复列表。

<li v-for="component in components" v-on:click="openApp">{{component.name}}</li>

我希望用户点击li并在我的VueJS实例上运行方法。因此v-on：点击。 openApp的方法如下所示：

openApp() {
    require.ensure(["./components/myComponent.vue"], function(){})
}

我遇到的问题是我无法动态地将名称传递给require.ensure，如下所示。

openApp() {
    let name = "myComponent";
    require.ensure(["./components/" + name + ".vue"], function(){})
}

我明白为什么我不能这样做。但是，这给我带来了一些架构问题。对于每个项目，我必须添加一个单独的功能，每次基本上都做同样的事情。这5件物品并没有这么一点，但是如果我达到50,100,1000件物品就会变得难看。我的问题是，最好的方法是什么？我应该咬紧牙关并用冗余的require.ensure对每种方法进行硬编码吗？或者这是一种更有活力的方法，我错过了吗？

Answer 1

webpack应该能够使用require.ensure的第一个参数中提到的模块创建一个新块。它确实支持动态发现的模块，例如：

require.ensure(["./components/" + name + ".vue"], function(){})

将创建一个包含./components/*.vue位置所有模块的块 - 即在构建期间，它将扫描目录并添加所有*.vue个文件。

但是，如果在运行时你尝试require在构建期间不存在的模块，它将失败。

虽然从技术上讲，你可以在一个块中创建一个很多的组件，但是你可能需要重新设计你的应用程序，让一个组件在输入的基础上表现不同。

如何使用vuejs和require.ensure处理动态组件

1 个答案: