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

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.mzph.cn/news/112386.shtml

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

相关文章

机器人SLAM与自主导航

机器人技术的迅猛发展&#xff0c;促使机器人逐渐走进了人们的生活&#xff0c;服务型室内移动机器人更是获得了广泛的关注。但室内机器人的普及还存在许多亟待解决的问题&#xff0c;定位与导航就是其中的关键问题之一。在这类问题的研究中&#xff0c;需要把握三个重点&#…

Python 打包whl文件Setup参数

setup 函数常用的参数如下 参数说明name包名称version包版本author程序的作者author_email程序的作者的邮箱地址maintainer维护者maintainer_email维护者的邮箱地址url程序的官网地址license程序的授权信息description程序的简单描述long_description程序的详细描述platforms程…

专题:链表常考题目汇总

文章目录 反转类型&#xff1a;206.反转链表完整版二刷记录 25. K个一组反转链表1 &#xff1a;子链表左闭右闭反转版本2 &#xff1a; 子链表左闭右开反转版本&#xff08;推荐&#xff09;⭐反转链表左闭右闭和左闭右开 合并类型&#xff1a;21.合并两个有序链表1: 递归法2: …

10月19日,每日信息差

今天是2023年10月19日&#xff0c;以下是为您准备的17条信息差 第一、中国海洋石油遭南向资金净卖出2.38亿港元 第二、阅文集团侯晓楠&#xff1a;网文已经成为中国文化的一张全球名片。据了解&#xff0c;2022年以来&#xff0c;阅文已经在海外上线了自制的300多部动漫影视作…

作为决策者,谁能拒绝这样一张数据可视化报表

数据分析是决策的一大助力&#xff0c;因此作为企业的管理决策者都会希望获得一份直观易懂、支持灵活自助分析的数据可视化报表&#xff0c;比如说由奥威BI数据可视化软件制作的这张BI报表。 名称&#xff1a;零售业数据分析驾驶舱 来源&#xff1a;奥威BI零售数据分析方案 …

pnpm的环境安装以及安装成功后无法使用的问题

文章目录 前言1、使用npm 安装2、安装后的注意点3、遇到问题4、配置path的环境变量&#xff08;1&#xff09;找到环境变量&#xff08;2&#xff09;找到并双击path的系统变量&#xff08;3&#xff09;复制第1步中使用npm安装的红框部分的路径&#xff08;4&#xff09;将第&…

【MySql】8- 实践篇(六)

文章目录 1. MySql保证主备一致1.1 MySQL 主备的基本原理1.2 binlog 的三种格式对比1.3 循环复制问题 2. MySql保证高可用2.1 主备延迟2.2 主备延迟的来源2.3 可靠性优先策略2.4 可用性优先策略 3. 备库为何会延迟很久-备库并行复制能力3.1 MySQL 5.6 版本的并行复制策略3.2 Ma…

编译安装Nginx+GeoIP2自动更新+防盗链+防爬虫+限制访问速度+限制连接数

此文章是Nginx的GeoIP2模块和MaxMind国家IP库相互结合&#xff0c;达到客户端IP访问的一个数据记录以及分析&#xff0c;同时还针对一些业务需求做出对Nginx中间件的控制&#xff0c;如&#xff1a;防盗链、防爬虫、限制访问速度、限制连接数等 该篇文章是从一个热爱搞技术的博…

他海投260万未回本,一天手写200面单到效率提升200%,经历了什么

他们是时代里的“小人物”&#xff0c;正经历着最为蓬勃的商业变革。年轻一代的创业老板们站在十字路口上&#xff0c;比老一辈更懂直播风口、人工智能、云计算、智能制造、数字经济等经济热词的含义。 作为北京快递行业内少见的本地人&#xff0c;范小菲形容自己的创业历程是…

使用Java生成玫瑰花代码

抖音最近爆火的玫瑰花示例代码 ***************- ;* ; : …

YOLOv8改进实战 | 更换主干网络Backbone(一)之轻量化模型Ghostnet

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法&#xff1a; 网络剪枝&#xff1a;移除神经网络中冗余的连接和参数&#xff0c;以达到模型压缩和加速的目的。分组卷积&#xff1a;将卷积操作分解为若干个…

Vue3+TS中的shims-vue.d.ts文件的作用及代码说明

在Vue3中安装TypeScript后&#xff0c;会出现一个shims-vue.d.ts文件&#xff0c;那么它是干什么的&#xff0c;起着什么作用呢&#xff1f; shims-vue.d.ts是为了typescript做的适配定义文件&#xff0c;因为.vue文件不是一个常规的文件类型&#xff0c;TypeScript是不能理解…

Centos7中redis开机自启动设置

以下亲测实践有效。 进入以下目录 cd usr/local/redis/redis-6.2.6/utils/ 编辑修改以下文件内容 vim redis_init_script #修改redis安装启动目录 REDISPORT6379 #修改安装目录 EXEC/usr/local/redis/redis-6.2.6/src/redis-server CLIEXEC/usr/local/redis/redis-6.2.6/sr…

jmeter监听每秒点击数(Hits per Second)

jmeter监听每秒点击数&#xff08;Hits per Second&#xff09; 下载插件添加监听器执行压测&#xff0c;监听结果 下载插件 点击选项&#xff0c;点击Plugins Manager (has upgrades)&#xff0c;点击Available Plugins&#xff0c;搜索5 Additional Graphs安装。 添加监听…

FPGA的通用FIFO设计verilog,1024*8bit仿真,源码和视频

名称&#xff1a;FIFO存储器设计1024*8bit 软件&#xff1a;Quartus 语言&#xff1a;Verilog 本代码为FIFO通用代码&#xff0c;其他深度和位宽可简单修改以下参数得到 reg [7:0] ram [1023:0];//RAM。深度1024&#xff0c;宽度8 代码功能&#xff1a; 设计一个基于FPGA…

【ELK 使用指南 3】Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构(附部署实例)

EFLKK 一、Zookeeper1.1 简介1.2 zookeeper的作用1.3 Zookeeper的特点1.5 Zookeeper的数据结构1.6 Zookeeper的应用场景1.7 Zookeeper的选举机制&#xff08;重要&#xff09;1.7.1 第一次启动时1.7.2 非第一次启动时 二、Zookeeper集群部署2.1 安装前准备2.2 安装 ZookeeperSt…

(三)QT中使用QVTKOpenGLNativeWidget的简单教程以及案例,利用PCLVisualizer显示点云

先添加一个带有ui的QT应用程序。 一、在ui界面中添加QVTKOpenGLNativeWidget控件 先拖出来一个QOpenGLWidget控件 修改布局如下&#xff1a; 然后将QOpenGLWidget控件提升为QVTKOpenGLNativeWidget控件&#xff0c;步骤如下&#xff1a; 右击QOpenGLWidget窗口&#xff0c;选…

【五:Httprunner的介绍使用】

接口自动化框架封装思想的建立。httprunner&#xff08;热加载&#xff1a;动态参数&#xff09;&#xff0c;去应用 意义不大。 day1 一、什么是Httprunner? 1.httprunner是一个面向http协议的通用测试框架&#xff0c;目前最新的版本3.X。以前比较流行的 2.X的版本。2.它的…

pytorch 入门 (三)案例一:mnist手写数字识别

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】mnist手写数字识别&#x1f356; 原作者&#xff1a;K同学啊 目录 一、 前期准备1. 设置GPU2. 导入…

面试题-React(十六):理解Redux及其工作原理

在现代前端开发中&#xff0c;状态管理是一个关键的问题。Redux是一个广泛使用的状态管理库&#xff0c;可以帮助开发者更有效地管理应用的状态。 一、什么是Redux&#xff1f; Redux是一个JavaScript状态管理库&#xff0c;用于管理应用中的状态&#xff08;state&#xff0…