html 引用vue3 element 首次加载缩成一团 挤在一起

问题：原生html引用vue,element plus 

分析：

vue.js, element脚本过大，首次加载网络慢的话，会是缩在这里，没完全渲染

解决：

没加载之前，不显示div，显示一个加载提示语

改动地方app先display:none,增加一个loading的div

<div id="loading" style="color: #aeaeae">正在加载,请稍后...</div>
<div id="app" class="common-layout" v-cloak style="display:none">
..
</div>

vue创建的勾子地方,隐藏loading层，显示app

const _app = createApp({
setup(){}

created() {
      document.getElementById("loading").style.display = "none"
      document.getElementById("app").style.display = "block"
    },
}
  _app.use(ElementPlus, {locale: zhCn})
  _app.component('Delete', ElementPlusIconsVue.Delete)
  _app.component('camerafilled', ElementPlusIconsVue.CameraFilled)
  _app.__VUE_PROD_DEVTOOLS__ = true
  const vm = _app.mount('#app')

最终效果

脚本下载之后，就会完整显示app