Vuetify 忽略 v-cloak答案

【问题标题】：Vuetify ignoring v-cloakVuetify 忽略 v-cloak
【发布时间】：2018-06-08 15:07:57
【问题描述】：

在使用 Vuetify 时，我无法防止内容的初始闪烁问题。我之前在没有任何 UI 库的情况下使用 Vue 时使用通常的v-cloak 解决方案实现了这一点，但无论出于何种原因，这不适用于 Vuetify，并且在 JS 完成加载之前我仍然会收到无样式内容的闪光。

我有初始的index.html，里面有这个（甚至尝试过内联display: none）：

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak style="display: none;"></div>
    ...
</body>

然后在初始的app.vue 文件中：

<template>
    <div id="app" v-cloak>
        <v-app v-cloak>
        ...
<style>
    [v-cloak] {
        display: none;
    }

由于某种原因，我认为 Vuetify 会覆盖内联 display: none 和多个 v-cloak。我应该如何解决这个错误，以便用户在加载时不会获得初始闪存？

【问题讨论】：

内联的东西很奇怪，因为 Vue/Vuetify 只能在应用程序实际控制 DOM 并渲染后覆盖它——此时可能不再有 FOUG，因为，好吧，应用程序有已经渲染了。
尝试应用 v-cloak="true" 而不仅仅是 v-cloak
不，将其设置为 true 并不能修复它。猜猜我只希望用户不会介意闪光灯。

标签： css vue.js vuetify.js

【解决方案1】：

这有点晚了，但问题似乎是页面在应用所有样式之前就开始渲染。要解决这个问题，你可以简单地mount你的视图实例onload：

import App from './components/App.vue'

const vm = new Vue({
  render: h => h(App)
})

window.onload = function() {
  vm.$mount('#app');
}

【讨论】：