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

最新推荐文章于 2024-03-27 23:02:04 发布
最新推荐文章于 2024-03-27 23:02:04 发布
阅读量542 收藏 8
点赞数 7
文章标签： html elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlegFox/article/details/135847845
版权

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

新版的需要挂载一下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>

  <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.js"></script>
</head>

<body>

  <div id="app">
    <el-button>{{message}}</el-button>
  </div>

</body>
<script>
  const { createApp, ref } = Vue
  createApp({
    setup () {
      const message = ref('Hello vue!')
      return {
        message,
      }
    }
  }).use(ElementPlus).mount('#app')
</script>

</html>

需要.use(ElementPlus)

青木狐
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在线引用CDN书写最简单的element+vue页面
pick_ears的博客
12-28 692
可以复制黏贴下面代码，也可以直接复制官网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">
vue3 devtools 版本6.5.0
05-04
GitHub上构建完的包，解压后，在Chrome插件管理-加载已解压的扩展程序，即可使用
【vue 引入cdn加载失败 解决办法】
slience_me的博客
05-20 1420
在项目index.html中放上 生产环境下自动加载 src下可以把文件放到自己服务器，本地加载 <% if(htmlWebpackPlugin.options.isProd){ %> <script src='file/20220519/vue.min.js' type='text/javascript'></script> <script src='file/20220519/vue-router.min.js' typ
使用cdn引入的方式创建一个vue3单页面内容
最新发布
m0_52320512的博客
03-27 363
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue 使用 cdn element ui 失效 问题解决
vransy的博客
08-09 2786
原写法 （失效） 正确写法 注意顺序！！！ element 用cdn导入，组件使用无效 element用cdn导入前面要加一个vue的cdn，这个大家都知道，但问题是如果你npm里面有vue的话，他会先用你npm里的vue来渲染你的组件，此时element还没有install到你的vue里所以会报错，在webpack里配置externals把vue从打包里去掉 ...
cdn使用体验以及坑 vue element
csstmg的博客
11-07 398
【代码】cdn使用体验以及坑 vue element。
使用CDN方式引入Vue和Element plus
haohulala的博客
05-30 3086
在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下。也就是先引入样式，然后引入Vue，最后引入Element plus。我一开始以为前端非常简单，没想到学习起来比后端的坑还多。完整的代码如下，这也是一个入门级的例程。
vue3中按需引入elementui-plus样式不生效
qq_44407871的博客
10-10 495
在main.js中添加以下代码，注意添加顺序。
HTML文件通过cdn引入element-ui组件样式不显示问题
潮汐未见潮落的博客
06-05 4216
html页面通过cdn引入element组件不显示的问题及两种解决方法
Vite vue 使用cdn引入element-plus
^_^
04-25 2642
使用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引
手写vue3响应式系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
v-shared-element:Vue.js的声明式共享元素转换
03-09
v共享元素 页面之间的声明式共享元素转换。 在引擎盖下使用的东西。 v3.0.0已经发布！ 如果要从v2.x升级，请参考变更以获取（简短的）重大更改列表。 该示例的源代码可以在上找到。 指数 安装 npm $ npm i v-shared-element 或者 CDN < script src =" https://unpkg.com/illusory " > </ script > < script src =" https://unpkg.com/v-shared-element " > </ script > 注册插件 Vue.js + Vue路由器 //main.js import Vue from 'vue' import { SharedElementRouteGuard , SharedElementDirective } from 'v-shar
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。相较于传统的web开发，前端使用js开发，服务端还需要用其他语言来写。vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法。通过cmd命令框输入：node -v 可查看是否安装。
vue-tailwindcss-cdn:Vue 3.x + Tailwind 2.x (cdn) :high_voltage:
05-29
Vue 3.x + Tailwind CSS 2.x （来自 CDN） :high_voltage: 这是一个用于快速原型制作HTML文件，其中包括： Vue 3.x 顺风 CSS 2.x 插件@tailwindcss/forms 插件@tailwindcss/typography 插件@tailwindcss/aspect-ratio 插件@tailwindcss/line-clamp 间变字体 不错的按钮:) 奖金 生产环境的入门模板 具有类似堆栈的（Vue 3.x + Tailwind 2.x + Inter var 字体）
Vue3组合式api.xmind
06-16
Vue3组合式api
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
my-vue-editor:Vue 2.x的富文本编辑器
05-11
感谢其作者提供了简洁的RTF编辑器插件，在此基础上，我们重写了本机方法并扩展了功能。 安装 npm install my - vue - editor 作为插件引入 import Vue from 'vue' import myVueEditor from 'my-vue-editor' Vue . ...
vuejs-sticky-directive:Vue指令支持基于纯js和vue的顶部和底部粘滞基
04-27
在纯js和vue上支持顶部和底部粘性。 安装 npm install vue-sticky-directive --save ES2015 // register globally import Sticky from 'vuejs-sticky-directive' Vue . use ( Sticky ) // or for a single ...
vue使用cdn引入element-ui
06-28
### 回答1： 可以使用cdn引入Element UI，方法是在HTML页面中添加Element UI的CDN链接，例如： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用cdn引入Element UI</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css"> </head> <body> <div id="app"> <el-button type="primary">按钮</el-button> </div> <script> new Vue({ el: '#app', }); </script> </body> </html> ``` 在以上代码中，我们引入了Vue和Element UI的CDN链接，并在代码中使用了一个Element UI的按钮组件。注意，这里我们引入了Element UI的CSS样式文件，以确保按钮等组件的样式正常显示。 ### 回答2： Vue是一个现代化的JavaScript框架，而Element-UI是一个由饿了么团队所开发的基于Vue框架的UI组件库。在开发Vue项目时，我们可以使用CDN的方式引入Element-UI，从而加快我们项目的开发速度。 使用CDN引入Element-UI有以下几个步骤： 一、在HTML文件中引入Element-UI的CDN文件 我们需要在HTML文件的head标签中引入Element-UI的CDN文件，示例代码如下： ```html <head> <!-- 引入 Vue.js --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <!-- 引入 Element-UI 的 JS 和 CSS 文件 --> <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script> </head> ``` 在以上代码中，我们引入了Vue.js和Element-UI的CDN文件，并将Element-UI的CSS文件和JS文件引入到了HTML文件中。 二、在Vue组件中使用Element-UI组件 接下来，我们可以在Vue组件中使用Element-UI提供的组件。我们只需要在Vue组件中使用Element-UI的组件名即可，示例代码如下： ```html <template> <div> <el-button type="primary">点击我</el-button> </div> </template> <script> export default { name: 'HelloWorld', data () { return {} } } </script> ``` 在以上代码中，我们在Vue组件中使用了Element-UI提供的按钮组件，即使用了el-button标签。 通过以上步骤，我们就可以在Vue项目中使用Element-UI提供的各种组件了，不需要下载组件库，也不需要安装依赖。使用CDN引入Element-UI可以让我们更加轻便地开发Vue项目。 ### 回答3： 使用CDN引入Element-UI是非常方便的。CDN（内容传递网络）是一种分布式网络解决方案，它使您可以从不同的服务器下载文件，并提供更快的下载速度和更好的用户体验。换句话说，在您自己的服务器上托管Element-UI并将其打包到您的应用程序中是非常耗时的，而使用CDN是最好的选择之一。 关于如何使用CDN引入Element-UI，通常应遵循以下步骤： 1. 在您的程序的HTML模板中，添加Element-UI的CSS和JavaScript文件的CDN链接。 例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Vue App</title> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/latest/theme-chalk/index.css"> </head> <body> <div id="app"></div> </body> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.4.9/index.js"></script> </html> ``` 2. 在您的Vue应用程序中，可以通过如下方式使用Element-UI组件： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在您的Vue组件中，可以如下使用Element-UI的组件： ```vue <template> <div> <el-button>Click me</el-button> </div> </template> <script> export default { name: 'MyComponent' } </script> ``` 总之，使用CDN引入Element-UI可以让您快速方便地启动Vue项目，并使其更快，更安全。此外，它还可以节省一些工作，因为您不必将Element-UI的文件导入应用程序目录中，也不需要手动的打包和构建。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值