使用CDN方式引入Vue和Element plus

最新推荐文章于 2024-08-06 10:47:38 发布

haohulala

最新推荐文章于 2024-08-06 10:47:38 发布

阅读量3.6k

点赞数 2

分类专栏：前端学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/haohulala/article/details/130946668

版权

在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。

整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    <!-- 引入vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入element plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>

也就是先引入样式，然后引入Vue，最后引入Element plus。

完整的代码如下，这也是一个入门级的例程

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haohulala

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

cdn方式引入element-plus icon

jerryyang_2017的博客

07-06

4176

浏览器直接引入element-plus使用icons-vue cdn引入element-plus使用icons-vue cdn引入element-plus使用icons 浏览器引入直接使用element-plus的icons

vue3的cdn方式+element plus的cdn方式使用

会点php的前端小渣渣

02-27

1580

【代码】vue3的cdn方式+element plus的cdn方式使用。

参与评论您还未登录，请先登录后发表或查看评论

f12 报错 XX is not defined ,引入elementplus后html页面无法正确显示,关于cdn引入的问题

最新发布

zhangyujiao_wb的博客

08-06

313

f12 报错 XX is not defined ,引入elementplus后html页面无法正确显示,关于cdn引入的问题

JS.CDN.Vue3.ElementPlus.20210128115701:使用CDN Vue3和ElementPlus

05-23

CDN.Vue3.ElementPlus 使用CDN Vue3和ElementPlus。演示特征销售点要求 2021-01-28 4 Model B Rev 1.2 破坏者10.0 2020-08-20 bash 5.0.3（1）-发布 Chrome86.0.4240.197 $ uname -a Linux raspberrypi 5.4.83-v7l+ # 1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux 安装 git clone https://github.com/ytyaru/JS.CDN.Vue3.ElementPlus.20210128115701 用法启动终端移动当前目录。到index.html所在的路径。 cd JS.CDN.Vue3.ElementPlus.20210128115701 /

Vite vue 使用cdn引入element-plus

^_^

04-25

2905

使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错，注意点 ① 如果不引入vue，就会提示createElementVnode找不到，原因是在element-plus这个源码中也在使用vue这个变量 ②如果不引入vue-demi，可以理解为vue和vue-demi 是互相引用的关系 ③注意使用vite-plugin-cdn-import插件不能按需引入element、直接在main.ts中使用全局引入的方式，打包后会自动按照cdn引

关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法

AlegFox的博客

01-25

837

关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法

vue3.2+vite+elementPlus，build引入CDN依赖包，提升打包速率，vite-plugin-cdn-import

唐策的博客

06-29

4004

注意使用vite-plugin-cdn-import插件不能按需引入element、直接在main.ts中使用全局引入的方式，打包后会自动按照cdn引入。如果不引入vue-demi，可以理解为vue和vue-demi 是互相引用的关系。依赖引用并非全部可用,有的js会不兼容, 自行尝试通过可用后在进行引用操作!根据需要自行切换相关CDN。jsdelivr网站。

cdn方法使用element plus问题记录

搞笑范fan

11-27

460

cdn 方法使用element plus问题记录

HTML-引入Vue3和Element Plus

04-24

Vue3引入方式通常有两种：使用CDN或本地安装。这里提到"js已离线"，意味着我们可能采用本地安装的方式。在HTML的`<head>`部分，我们可以添加如下代码来引入Vue3的核心库： ```html <script src="libs/vue.global....

vue3引入element-plus的各种方式

weixin_46463984的博客

04-10

3540

vue3引入element-plus的各种方式 element-plus 导入总是出现问题，所以做了个小结使用 pnpm 管理，版本号如何进行引入的先搞清楚具体的包的位置和内容 element-plus 在项目中的地址 el-xxx 就是一个一个封装好的组件注意目录的层级 element-plus---->lib----> xxxx 第一种全局注册有了上面的图解应该很容易明白这种引入方式的原理了 //全局导入 import 'element-pl

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

qq_42264793的博客

11-18

8545

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

vue3.0框架Element Plus

a13213766526的博客

11-08

1204

适用于vue3.0的UI框架element Plus

vue3+element-plus配置cdn

鹏多多的博客

01-17

4412

最近在做一个项目，项目配置版本如下

使用CDN方式引用Vue3和ElementPlus

包子的博客

07-23

4539

升级了之前做的vue2+ElementUI的项目,汇总一下遇到的问题。

cdn引入element，并使用element组件

qq_42342276的博客

10-14

1770

cdn引入element，并使用element组件打印ELEMENT console.log(ELEMENT) 控制台结果(只截取了一部分)：找到对应的方法或者对象就能使用element组件使用例1：使用message(消息提示) ELEMENT.Message.error('错误提示'); //错误提示 ELEMENT.Message.warning('告警提示'); //告警提示例2：使用Loadin

前端 cdn 方式使用 Vue + element-ui

Steve_v的博客

02-25

2345

【代码】前端 cdn 方式使用 Vue + element-ui。

cdn引入Element -ui

qq_45641978的博客

07-19

5381

需求由于老板感觉pad中其中一个项目运行的有点慢，小明接到需求要修改该项目，明确要求不能使用element -ui 但是还是有个同学强行在小明项目上使用了，小明真的是左右为难啊，现在小明只能使用cdn引入啦。 cdn引入element-ui 小明查看文档并快速的将代码ctrl+c、ctrl+v弄好了，还没运行呢小明就开始洋洋得意了，npm run dev之后，发现项目跑起来了，但是页面呢？白屏一片，查看报错Vue is not defined这时为何呢，此时小嘟看见了小明的屏幕白了，赶忙上..

CDN引入Vue3

qq_39196447的博客

04-25

1043

注意：我们打开bootcdn网站，发现会有很多版本的，例如vue.global.prod.js、vue.esm-browser.min.js等。注意几个关键词，其中global是指提供一个全局的Vue属性、esm-browser是可以使用。在html的内引入，好似下面这样，我这边使用了。，因为比较顺眼，主要官网中提供的CDN很容易挂。

@element-plus/icons-vue 如何通过cdn引入

09-14

通过 CDN 引入 @element-plus/icons-vue 是非常简单的。你可以按照以下步骤进行操作： 1. 首先，在你的 HTML 文件中，添加 Element Plus 的 CSS 文件和 Vue 的 JavaScript 文件的 CDN 链接。你可以在 `<head>` 标签...