element-ui 以CDN 方式引入原生js开发的几个别坑 (+vue)

news2024/11/17 7:20:27

element-ui 以CDN 方式引入原生js开发的几个坑

最近两个月太忙了 忙的没空写文章 两个月赶出来了几个的项目

一个是雪佛兰裸眼3D的一个商品屏幕展示项目
一个是广汽云渲染的一个云看车项目
一个是奥迪中国充电桩的网页开发项目,

奥迪中国做个饭也是目前正在做的 不同的是用的不是平时的编辑器 是 Adobe 旗下的一个开发平台AEM 进行网页开发,已知的组件不能满足开发设计需要,只能进行原生js开发,遇到了几个比较少见的问题 于是想记录一下

第一个坑

在原生进行element-ui引入的时候 需要进行cdn方式引入,也就是

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

但是!!问题出现了,大家应该会遇到 Uncaught TypeError: Cannot read property ‘prototype’ of undefined 且ele功能全不可用
在这里插入图片描述
一番排查下 发现真不愧是vue的配套ui 原生里想用 需要引入vue 也就是

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

正常运行 无报错 各组件生效。

第二个坑

原生项目上线AEM平台后(也等同项目上线),elementUI 的icon 全部失效 出现小方框

逐一排查后,发现是icon包位置失效

直接贴上解决办法:

  1. 在线上项目地址里创建字体或者icon文件夹
  2. 在下载链接 下载在这里插入图片描述
    下载这个两个文件 存放在线上对应位置
  3. 修改sdk对应的引用地址在这里插入图片描述

完结撒花~~~
然后就可以看到原生部署也能正常使用element-ui 啦~

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

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

相关文章

Linux系统编程04

进程的概念 进程&#xff08;动态&#xff09;是一个正在运行的程序&#xff08;静态&#xff09; 多道程序设计缺点&#xff1a; &#xff08;1&#xff09;缺乏隔离&#xff0c;各个程序之间可以直接访问&#xff0c;使用对方的数据 &#xff08;2&#xff09;内存使用率低&a…

正点原子嵌入式linux驱动开发——LED驱动开发

在上一篇笔记中&#xff0c;详细的讲解了字符设备驱动开发步骤&#xff0c;并且用一个虚拟的chrdevbase设备为例完成了第一个字符设备驱动的开发。本章就开始编写第一个真正的Linux字符设备驱动。在正点原子STM32MP157开发板上有一个LED灯&#xff0c;本章就学习一下如何编写Li…

探讨Unity新的收费模式:对开发者与游戏行业的影响、负面因素的解析及面对挑战的建议

本人详解 作者&#xff1a;王文峰&#xff0c;参加过 CSDN 2020年度博客之星&#xff0c;《Java王大师王天师》采购供应链共享平台人员,财务规则对账人员&#xff0c;物流门禁计量系统对接人员&#xff0c;ERP事业部人员 Unity是一款备受开发者欢迎的跨平台游戏引擎&#xff0c…

基于SSM的台球厅管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

【再识C进阶5(上)】详细介绍C语言文件操作——文件是用于存储数据

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

成绩查询页面和自助查询方式

科技发展让我们有更多的方式来发布和查询学生成绩。今天&#xff0c;我想向大家介绍什么是成绩查询页面&#xff0c;并分享如何通过各种代码和Excel来实现让学生自助查询成绩。 成绩查询页面是一个专门用来发布和查询学生成绩的网络页面。这个页面具有发布、查询、统计成绩等功…

Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

之前一直naive-ui搭配使用的是xicons&#xff0c;后来发现Iconify支持的图标合集更多&#xff0c;因此转而使用Iconify。 与FontAwesome不同的是&#xff0c;Iconify配合Icones相当于是一个合集&#xff0c;Iconify提供了快捷引入图标的方式&#xff0c;而Icones是一个大的图标…

二、vue基础语法

一、模板语法 1、文本渲染 使用双花括号语法插入文本 <template><div><h3>msg: {{ message }}</h3></div> </template><script> export default {data() {return {message: "输出信息"}} } </script><style s…

SAP 路径及运输功能

一、 概述 SAP的发运功能包括两部份内容&#xff0c;一是运输路径&#xff1b;二是运输功能。运输路径是运输功能的基础。 SAP 中的运输功能是后勤执行的一部分&#xff0c;用于自动计算交货成本&#xff1b;也就是说&#xff0c;SAP 可以让系统自动对销售发货的商品计算运费&…

web APIs——第一天(上)

变量声明的时候建议 const优先&#xff0c;尽量使用const 原因&#xff1a; const语义化更好很多变量我们声明的时候就知道他不会被更改了&#xff0c;那为什么不用const呢&#xff1f;实际开发中也是&#xff0c;比如react框架&#xff0c;基本const如果你有纠结的时候&…

记一次Clickhouse 复制表同步延迟排查

现象 数据从集群中一个节点写入之后&#xff0c;其他两个节点无法及时查询到数据&#xff0c;等了几分钟。因为我们ck集群是读写分离架构&#xff0c;也就是一个节点写数据&#xff0c;其他节点供读取。 排查思路 从业务得知&#xff0c;数据更新时间点为&#xff1a;11:30。…

信驰达RF-BM-2340x系列BLE蓝牙模块正式登录TI官网

信驰达作为TI中国低功耗连接技术第三方IDH&#xff0c;RF-BM-2340x系列低功耗蓝牙模块正式通过TI认证并在全球进行推广。 图 1 TI官网信驰达RF-BM-2340x系列BLE蓝牙模块 一直以来&#xff0c;信驰达重视在无线射频通信领域基础技术上的投入&#xff0c;奠定了公司在低功耗蓝牙…

Redis数据结构之SDS

前言 字符串在 Redis 中的应用场景十分广泛&#xff0c;所有的键都是字符串类型&#xff0c;值也可能是字符串类型。 比如电商系统用 Redis 缓存商品信息&#xff0c;可以把商品 ID 作为键&#xff0c;商品信息序列化为 JSON 后作为值写入&#xff1a; SET item:1001 {"…

使用python自动化操作如何使用subprocess,mac如何查看软件安装路径

使用下面这种方法实现需要配置全局的环境变量&#xff0c;很麻烦 import subprocessdef open_wps_new_doc():try:# 打开WPS应用程序subprocess.Popen(wps)# 等待一段时间&#xff0c;确保WPS完全打开time.sleep(2)# 发送快捷键组合&#xff0c;新建一个Word文档pyautogui.hotk…

linux进阶(3)

课程链接 CH10-2-Apache的其他用途_哔哩哔哩_bilibili scp不够好,因为他需要知道服务器上具体的一个目录

MySQL -- 数据库基础

MySQL – 数据库基础 文章目录 MySQL -- 数据库基础一、基础知识1.什么是数据库2.连接服务器3.服务器、数据库、表的关系3.MySQL架构4.SQL分类5.存储引擎 一、基础知识 1.什么是数据库 文件存储数据有以下几个缺点&#xff1a; 文件的安全性问题文件不利于数据查询和管理文件…

【ARM AMBA5 CHI 入门 12.2 -- CHI 协议层详细介绍 】

文章目录 1 协议层1.1 协议层传输通道1.2 域段1.2.1 ID域段1.2.2 其他关键域段1.2.2.1 Address1.2.2.2 Secure bit1.2.2.3 Memory Attributes1.2.2.4 Transaction attribute combinations 1.4.1 Transaction 路由1.4.2 SAM 介绍1.4.3 Node ID 1.5 节点间数据怎么传输的呢&#…

jdk11的HttpClient

我们都知道在jdk11之前都在用okhttp或者org.apache.httpcomponents 其实早在jdk9的时候这个方案就在孵化中 上面的截图来自openjdk的官网&#xff0c;注&#xff1a;openjdk是个开源项目&#xff0c;不存在侵权现象 这是openjdk的官网&#xff1a;JEP 110: HTTP/2 Client (In…

vue 插槽 作用域插槽

vue 插槽 作用域插槽 **创建 工程&#xff1a; H:\java_work\java_springboot\vue_study ctrl按住不放 右键 悬着 powershell H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\10-插槽-作用域插槽 vue --version vue crea…

安科瑞关于红外测温技术在变电站运维中的应用

安科瑞 崔丽洁 红外测温技术 特点 工作中的输变电机械设备由于电流热效应产生了红外线照射效应&#xff0c;从而在电气设备表层形成了相应的高温场&#xff0c;而红外线测温高温技术则透过吸取这些自高温场发出的红外线照射热能&#xff0c;并透过电流效应以及放大器和A/D转换器…