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;需要把握三个重点&#…

专题:链表常考题目汇总

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

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

数据分析是决策的一大助力&#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;范小菲形容自己的创业历程是…

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

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

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. 导入…

基于主动移频法与AFD孤岛检测的单相并网逆变器仿真(Simulink仿真实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

二、vue基础语法

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

成集云 | 思迅商慧集成用友T | 解决方案

源系统成集云目标系统 方案介绍 思迅商慧是一款集批次成本、配送复核、自助收银、供应链、加盟管理等于一身的零售管理软件。可以帮助解决客户的运营和管理难题&#xff0c;包括加盟店管理、供应商管理、配送复核管理、商品经营维护、自助收银系统等。 用友T是一款…

Node.js在Python中的应用实例解析

随着互联网的发展&#xff0c;数据爬取成为了获取信息的重要手段。本文将以豆瓣网为案例&#xff0c;通过技术问答的方式&#xff0c;介绍如何使用Node.js在Python中实现数据爬取&#xff0c;并提供详细的实现代码过程。 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境…

Flutter——最详细(CustomScrollView)使用教程

CustomScrollView简介 创建一个 [ScrollView]&#xff0c;该视图使用薄片创建自定义滚动效果。 [SliverList]&#xff0c;这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]&#xff0c;这是一种更高效的薄片&#xff0c;它显示沿滚动轴具有相同范围的子级的线性列…

JavaScript爬虫程序实现自动化爬取tiktok数据教程

以下是一个使用 request-promise 和 JavaScript 的爬虫程序&#xff0c;用于爬取tiktok的内容。此程序使用了 https://www.duoip.cn/get_proxy 这段代码。 // 引入 request-promise 库 const rp require(request-promise);// 定义 get\_proxy 函数 function get_proxy() {retu…