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

news2024/11/17 13:37:47

问题:原生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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1713598.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CatDDoS僵尸网络与DNSBomb攻击:DDOS攻击最新变种

在近期的网络安全领域&#xff0c;两大严峻挑战浮出水面&#xff0c;为中国乃至全球的网络防护体系敲响了警钟。中国安全厂商奇安信的X实验室团队揭露了一波名为CatDDoS的恶意软件攻击浪潮&#xff0c;与此同时&#xff0c;一种创新且隐蔽的拒绝服务攻击技术——DNSBomb&#x…

揭秘IDM:数字资产管理的未来之星

在当今数字化时代&#xff0c;数字资产管理的重要性日益凸显。随着科技的飞速发展&#xff0c;越来越多的企业和个人开始关注如何有效管理和保护他们的数字资产。在这个过程中&#xff0c;IDM&#xff08;身份管理系统&#xff09;逐渐成为了热门话题。IDM作为一种新兴的技术手…

云原生网关 MSE-Higress

云原生网关 MSE-Higress 什么是云原生网关MSEMSE测评产品文档产品能力产品控制台 MSE与其他网关 什么是云原生网关MSE 在体验云原生网关 MSE-Higress功能之前&#xff0c;先了解一下什么是云原生网关 MSE&#xff0c;简单的说就是MSE就是遵循开源 Ingress/Gateway API 标准的下…

探数API分享-全球电价一览:谁最高,谁最低?

全球家庭用电价格的平均水平约为0.139美元/千瓦时&#xff0c;这是根据2021年12月的统计数据得出的。在这个平均水平之上&#xff0c;有一些国家的家庭用电价格远超过这个数值&#xff0c;特别是在欧洲的一些发达国家。 丹麦、荷兰、德国、英国、西班牙、比利时等国家的家庭用…

Token验证流程、代码示例、优缺点和安全策略,一文告诉你。

Token和Session都是用于身份验证和授权的机制&#xff0c;而且Token渐渐成为主流&#xff0c;有不少小伙伴对token的认识不全&#xff0c;这里给大家分享下。 一、什么是Token Token是一种用于身份验证和授权的令牌&#xff0c;通常用于在客户端和服务器之间进行安全的通信。…

小型水库水雨情和大坝安全监测解决方案

小型水库水雨情和大坝安全监测解决方案 小型水库作为重要的水资源管理和防洪调蓄设施&#xff0c;在保障农业灌溉、居民饮水及防洪安全方面发挥着不可或缺的作用。然而&#xff0c;由于其规模限制&#xff0c;小型水库往往在水雨情监测和大坝安全评估方面面临资源和技术的双重…

项目经理催开发进度的5大技巧

项目经理在催促开发进度时&#xff0c;采用的技巧对于项目成功至关重要。这不仅影响到项目的按时完成&#xff0c;还关系到团队的士气、效率和最终产品的质量。项目经理如果不去主动催促开发进度&#xff0c;可能导致项目延期&#xff0c;团队偏离原定路线&#xff0c;工作重点…

ASTRONEER异星探险家服务器开服多人联机

1、购买后登录服务器 进入控制面板后会出现正在安装的界面&#xff0c;安装大约5分钟&#xff08;如长时间处于安装中请联系我们的客服人员&#xff09; 2、获取数字IP地址 使用IP 地址查询网站将服务器IP地址填入后点击查询&#xff08;查询的时候将地址冒号后方的数字以及冒…

红苹果的圆度、直径大小标定

function fruitImageProcessingGUI% 创建主窗口和控件mainFigure figure(Units, normalized, Position, [0.3, 0.3, 0.4, 0.4]);instructionText uicontrol(Style, text, String, 请点击按钮执行相应的图像处理步骤, ...Units, normalized, Position, [0.1, 0.7, 0.8, 0.2], …

Nacos 进阶篇---Nacos服务下线做了哪些事情 ?(八)

一、引言 本章节是第一阶段最后一篇&#xff0c;那么我们今天要学习的源码内容是 “服务下线”. 当Nacos客户端下线的时候&#xff0c;是要去通知服务端&#xff0c;告诉服务端 “ 我已经下线&#xff0c;不可用了 ”。并且在服务下线时&#xff0c;还要去通知其他客户端服务更…

uni-app解决表格uni-table样式问题

一、如何让表格文字只显示一行&#xff0c;超出部分用省略号表示 步骤 &#xff1a; 给table设置table-layout:fixed; 列宽由表格宽度和列宽度设定。&#xff08;默认是由单元格内容设定&#xff09;让表格元素继承父元素宽度固定table-layout: inherit;overflow: hidden;超过…

STM32-电灯,仿真

目录 1.配置vscode 2.新创建软件工程 3.仿真 4.源码 5.运行效果 1.配置vscode http://t.csdnimg.cn/BvCLx 安装 C/C Extension Pack 安装 Embedded IDE 安装 Keil MDK 配置路径 2.新创建软件工程 下拉找到对应的 输入项目名字,选择项目所在文件夹即可 3.仿真 一路新…

机器视觉分析在加油站安全中的应用:使用手机检测、打电话行为识别

在加油站等高危场所&#xff0c;禁止使用手机是为了防止潜在的火灾和爆炸风险。手机在使用过程中可能产生电火花&#xff0c;而在加油站这种易燃易爆环境中&#xff0c;任何电火花都可能引发严重的安全事故。因此&#xff0c;加油站禁止使用手机是保障安全生产的重要措施。基于…

【好书分享第十三期】AI数据处理实战108招:ChatGPT+Excel+VBA

文章目录 一、内容介绍二、内页插图三、作者简介四、前言/序言五、目录 一、内容介绍 《AI数据处理实战108招&#xff1a;ChatGPTExcelVBA》通过7个专题内容、108个实用技巧&#xff0c;讲解了如何运用ChatGPT结合办公软件Excel和VBA代码实现AI办公智能化、高效化。随书附赠了…

深入解析多维数组与主对角线元素之和

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;多维数组的奥秘 二、多维数组的基本概念 1. 定义与创建 2. 维度与形…

(文章复现)分布式电源接入配电网承载力评估方法研究

参考文献&#xff1a; [1]郝文斌,孟志高,张勇,等.新型电力系统下多分布式电源接入配电网承载力评估方法研究[J].电力系统保护与控制,2023,51(14):23-33. 1.摘要 随着光伏和风电等多种分布式电源的接入&#xff0c;使得传统配电网的结构及其运行状态发生了较大改变。因此&…

Tableau解包与版本兼容性

Tableau解包与版本兼容性 1、背景描述2、Tableau解包3、Tableau版本兼容性 1、背景描述 有时&#xff0c;在使用Tableau Desktop打开.twbx打包工作簿时&#xff0c;可能会出现如下弹框&#xff1a; 通常考虑以下两种处理情况 2、Tableau解包 解包打包的.twbx工作簿&#xff0c…

会议管理系统(含源码+sql+视频导入教程)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 会议管理系统拥有两种角色 管理员&#xff1a;部门管理、员工管理、会议管理、会议室管理、预订会议、添加员工、注册员工审批等 用户&#xff1a;个人通知中心、预订会议、查看所有会议…

强化学习——学习笔记3

一、强化学习都有哪些分类&#xff1f; 1、基于模型与不基于模型 根据是否具有环境模型&#xff0c;强化学习算法分为两种&#xff1a;基于模型与不基于模型 基于模型的强化学习(Model-based RL)&#xff1a;可以简单的使用动态规划求解&#xff0c;任务可定义为预测和控制&am…

文心智能体平台 | 想象即现实

目录 文心智能体平台介绍平台简介通过平台能做什么平台的优势智能体介绍智能体类型AI 插件介绍 动手创建一个智能体访问平台并进行账号注册根据适合的方式选择智能体类型快速创建智能体智能体个性化模块配置 总结注意事项我的智能体 文心智能体平台介绍 平台简介 文心智能体平…