element-plus的CDN引用以及结合VUE3使用

最新推荐文章于 2024-06-12 11:58:02 发布
最新推荐文章于 2024-06-12 11:58:02 发布
阅读量8.4k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42264793/article/details/109783264
版权

element-plus

npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install element-plus --save

CDN
目前可以通过 unpkg.com/element-plus 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

引入样式
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
引入组件库
<script src="https://unpkg.com/element-plus/lib/index.js"></script>

具体代码：

若页面无法render，可以使用modules，调整组件库文件引用：<script src="/element-plus/lib/index.js">

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
</head>
<body>
  <div id
最低0.47元/天 解锁文章
绅士的可怖
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
专栏目录
vue3-element-plus-webpack5:一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 看
03-05
一个使用element-plus框架，基于Vue3.x，使用webpack5.x构建（无vue-cli-service，刹车于扩展插件）的脚手架项目。 参见： : 一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 ...
关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法
AlegFox的博客
01-25 743
关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法
vue-cli4 vue3+element-plus采用本地cdn方式，提高开发启动速度
九段刀客的博客
12-05 1165
public/index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /&g
通过CDN方式引入VUE3
最新发布
weixin_46011719的博客
06-12 307
通过CDN方式引入VUE3的基础使用
使用CDN方式引入Vue和Element plus
haohulala的博客
05-30 3456
在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下。也就是先引入样式，然后引入Vue，最后引入Element plus。我一开始以为前端非常简单，没想到学习起来比后端的坑还多。完整的代码如下，这也是一个入门级的例程。
Vue3.0之引入Element-plus ui样式
热门推荐
唐昊
06-17 1万+
安装：官网 npm install element-plus --save 第一种：CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <! – 引入样式 --> < link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/theme-chalk/index.css”> <! – 引入组件库 --> <
使用CDN方式引用Vue3和ElementPlus
包子的博客
07-23 4397
升级了之前做的vue2+ElementUI的项目,汇总一下遇到的问题。
在线引用CDN书写最简单的element+vue页面
pick_ears的博客
12-28 709
可以复制黏贴下面代码，也可以直接复制官网Hello案例 <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app">
vue-cli3.0用cdn引入element-ui
yuanqi3131的博客
11-27 6806
一般项目编写完成，打包的文件都挺大的，所以吧那些常用不会改变的采用cdn引入，减小包的体积，本例子使用的是vue-cli3.0，先在vue.config.js配置externals config.externals = { Vue: "Vue", Vuex: "Vuex", "element-ui": "ELEMENT", moment: 'mo...
vue3.2+vite+elementPlus，build引入CDN依赖包，提升打包速率，vite-plugin-cdn-import
唐策的博客
06-29 3571
注意使用vite-plugin-cdn-import插件 不能按需引入element、直接在main.ts中使用全局引入的方式，打包后会自动按照cdn引入。如果不引入vue-demi，可以理解为vue和vue-demi 是互相引用的关系。依赖引用并非全部可用,有的js会不兼容, 自行尝试通过可用后在进行引用操作!根据需要自行切换相关CDN。jsdelivr网站。
HTML-引入Vue3和Element Plus
04-24
既然我们已经离线引用Vue3，那么Element Plus也很可能通过本地引入。在`<head>`中加入以下代码： ```html <link rel="stylesheet" href="libs/element-plus/dist/index.css"> <script src="libs/element-plus/dist/...
基于vue3+element-plus的一个物资后台管理系统源码.zip
06-15
综上所述，这个基于Vue3和Element Plus的物资后台管理系统源码涵盖了前端开发的多个方面，包括但不限于Vue3的最新特性、UI组件库的应用、前端路由和状态管理、API通信以及测试和部署等核心知识点。通过深入研究这个...
element-ui官网CDN下载方法，java代码实现
10-29
Element UI 是一个基于 Vue.js 的开源组件库，用于构建用户界面。它提供了丰富的组件，如表格、按钮、对话框、通知等，使得开发者能够快速构建美观的前端应用。本篇文章将详细讲解如何通过 Java 代码实现从 Element ...
element-plus打包
05-24
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，提供了丰富的界面组件，如表格、按钮、下拉菜单等，用于快速构建现代化的前端应用。"element-plus打包" 指的是将 Element Plus 项目进行构建和打包的过程，以便在...
vue3+element-plus配置cdn
鹏多多的博客
01-17 4257
最近在做一个项目，项目配置版本如下
Vue3中Element-plus不生效问题解决
kk爱闹
02-15 4137
解决Vue3中element-plus不生效问题
html通过cdn引入element字体图标无法显示的解决办法
qq_35469137的博客
03-17 2997
问题：element通过cdn引入时，按官网引入线上css样式图标样式正常显示没问题，如果引入本地css则字体图标不显示 <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><!--线上css地址--> <!-- import Vue before Element --> <script src="../j
解决vue3按需引入element-plus的组件而样式不显示的问题
qq_45160662的博客
09-11 4661
解决vue3按需引入element-plus的组件而样式不显示的问题
VUE3.2引入Element-plus样式不生效问题
RRLH88888的博客
10-26 3955
element-plus使用遇到的样式问题。
vue3 element-plus 加载优化
08-10
vue3 + element-plus 加载优化是通过减少页面加载时间并提高用户体验来优化页面加载速度的过程。以下是一些优化方法： 1. 按需引入：使用 babel-plugin-import 插件按需引入 element-plus 组件，避免全部引入导致打包产生冗余代码。只引入使用到的组件，可以减少包的体积，提高页面加载速度。 2. 使用 CDN：将 element-plus 的核心库文件放在 CDN 上，通过 CDN 加载文件，可以减少服务器的压力，提高加载速度。 3. 合并文件：对 element-plus 的样式和脚本进行合并，将多个文件合并为一个文件，减少文件的请求次数，加快页面的加载速度。 4. 使用路由懒加载：对于较大的页面或组件，可以使用 Vue Router 的懒加载功能，当页面需要加载时再进行加载，而非一次性加载所有页面，减少页面初始加载时间。 5. 图片压缩处理：对于使用 element-plus 组件中的背景图片或者自定义的图片，可以使用图片压缩软件进行压缩处理，减小图片文件的大小，提高图片的加载速度。 6. 代码优化：对于 vue3 和 element-plus 的代码进行优化，如减少冗余代码、使用 computed/watch 等功能，提高页面的渲染效率。 综上所述，通过上述的优化措施，可以有效地减少 vue3 + element-plus 的加载时间，提高页面的加载速度和用户体验。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绅士的可怖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值