Vue.js vuejs v-Clope在资源下载时的放置_Vue.js

Vue.js vuejs v-Clope在资源下载时的放置

vue.js

Vue.js vuejs v-Clope在资源下载时的放置,vue.js,Vue.js,目前，我正在制作vuejs SPA，构建大小相当大，因此我希望在vue下载其资产时放置一些加载指示器，而不是空白页面我发现在本例中，解决方案是v-斗篷，但我不明白的是，在每个示例中，v-斗篷都放在index.html中，而在我的项目src中没有index.html，只有main.js和vue.app 有index.html，但位于公用文件夹中（我认为这是一个构建文件？）尽管如此，我还是尝试在Vue.app中加入v-Dope指令，当Vue下载其资产时，它仍然显示空白页面。请给我指一下正确的方向

目前，我正在制作vuejs SPA，构建大小相当大，因此我希望在vue下载其资产时放置一些加载指示器，而不是空白页面

我发现在本例中，解决方案是v-斗篷，但我不明白的是，在每个示例中，v-斗篷都放在index.html中，而在我的项目src中没有index.html，只有main.js和vue.app

有index.html，但位于公用文件夹中（我认为这是一个构建文件？）

尽管如此，我还是尝试在Vue.app中加入v-Dope指令，当Vue下载其资产时，它仍然显示空白页面。请给我指一下正确的方向。谢谢你的帮助

这是我的App.vue：

<template>
  <div id="app">
   <div v-cloak>

   <div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML -->
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
      <span class="sr-only">Loading...</span>
   </div>

   <div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML -->
      <!-- Rest of the contents -->
      <router-view />
   </div>

  </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
[v-cloak] .v-cloak--block {
  display: block;
}
[v-cloak] .v-cloak--inline {
  display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
  display: inline-block;
}
[v-cloak] .v-cloak--hidden {
  display: none;
}
[v-cloak] .v-cloak--invisible {
  visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none;
}
</style>


加载。。。
导出默认值{
名称：“应用程序”
}
[v-斗篷].v-斗篷--阻止{
显示：块；
}
[v-斗篷].v-斗篷--内联{
显示：内联；
}
[v-斗篷].v-斗篷--内联块{
显示：内联块；
}
[v-斗篷].v-斗篷--隐藏{
显示：无；
}
[v-斗篷].v-斗篷--不可见{
可见性：隐藏；
}
.v-斗篷-挡块，
.v-斗篷-内联，
.v-斗篷-内联块{
显示：无；
}

当我在public/index.html中放置一些加载指示器时，它会工作，但是在vue完成加载后如何删除它呢？这是我的public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    Loading
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


很抱歉，如果未启用JavaScript，则无法正常工作。请使其继续。
加载

v-clope

应该在应用程序的安装点上使用（在

new Vue（）

中指定的

el

），而不是在组件中使用。Vue不处理安装点以外的任何位置的

v-clope

，因此它在

App.Vue

中无效

要使用v形斗篷：

在

public/index.html

中，将

v-clope

属性添加到

div#app

，并使用

块将其隐藏：


[v-斗篷]{
显示：无；
}

在

div#app

旁边添加一个加载图标，并设置其样式，以便在删除

v-clope

属性时隐藏它（即

：not（[v-clope]）

）：


.装货{
显示：网格；
地点内容：中心；
}
#应用程序：未加载（[v-斗篷]）~{
显示：无；
}