Vue.js防止布局跳转

Question

我有几个Vue.js组件，它们在加载时会导致内容被推开。

为了解决这个问题，我创建了一些CSS规则，专门针对我的Vue组件的自定义HTML标记，如so组件：

custom-tag {
    float: left;
    width: 150px;
    // etc.
}

这个示例将用于CustomTag.vue。这将在Vue.js尚未将此自定义标记替换为相应的Vue.js组件时生效。因此，这实际上将确保我的布局是正确的，即使没有javascript。

虽然这是可行的，但这还远远不是一个完美的解决方案。我觉得Vue.js需要很长时间才能生效，即使它被缓存并放入一个单独的135 of (Gzipped)供应商文件中。

我很难为Vue.js找到任何真正的解决方案或信息，所以我想知道其他人是如何处理这个问题的？这是因为javascript加载不够快之类的问题吗？

Answer 1

这是相当奇怪的，但也许它可能有很长的模板，引擎必须在呈现之前编译器。

您应该考虑先预览您的模板。我想如果您在呈现之前的html中有自定义标记，您就不会这么做……如果可以的话可以使用单文件组件。如果您来自function，您还可以发现jsx for Vue很有用，甚至可以手工编写呈现函数(尽管不推荐)。

但是，如果您想完全取消第一次呈现的时间，那么唯一的方法就是执行服务器端呈现。因此，您的应用程序将使用已经存在的初始html结构。