html 单页面引用vue3和element-plus

引入方式:
element-plus基于vue3.0,所以必须导入vue3.0的js文件,然后再导入element-plus自身所需的js以及css文件,导入文件有两种方法:外部引用、下载本地使用

  1. 通过外部引用ElementPlus的css和js文件 以及Vue3.0文件
<head><!-- Import style --><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><!-- Import Vue 3 --><script src="//unpkg.com/vue@3"></script><!-- Import component library --><script src="//unpkg.com/element-plus"></script>
</head>
  1. 将css和js文件下载到本地使用 点击链接打开;复制粘贴到本地新建的css和js文件
    在这里插入图片描述
    在这里插入图片描述
  2. 完整代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- Import style --><link rel="stylesheet" href="AIQuestion/element-plus.css" /><!-- Import Vue 3 --><script src="AIQuestion/vue3.js"></script><!-- Import component library --><script src="AIQuestion/element-plus.js"></script>
</head><body><div id="app"><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row></div><script>const App = {data() {return {}}}const App2 = Vue.createApp(App)App2.use(ElementPlus)App2.mount(app)</script>
</body></html>

最后页面上展示一下的效果就表示成功好了
在这里插入图片描述
感谢好心人他是原创

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3247251.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

LG 选择 Flutter 来增强其智能电视操作系统 webOS

可以这个话题会让大多数人困惑&#xff0c;2024 年了为什么还会冒出 webOS 这种老古董&#xff1f;然后 LG 为什么选择 webOS &#xff1f;现在为什么又选择 Flutter &#xff1f; 其实早在 Google I/O 发布 Flutter 3.22 版本的时候&#xff0c;就提到了 LG 选择 Flutter 来增…

Postfix+Dovecot+Roundcube开源邮件系统搭建系列1-2:系统搭建目标+MariaDB数据库配置(MySQL)

1. 系统搭建目标 通过本系列文章&#xff0c;最终可以部署一套提供如下服务的邮件系统&#xff1a; SMTP服务&#xff1a;由Postfix提供&#xff0c;监听25、465、587端口。POP3服务&#xff1a;由Dovecot提供&#xff0c;监听110、995端口。IMAP服务&#xff1a;由Dovecot提…

el-table fixed固定列导致错位的解决方法介绍

问题描述&#xff1a; Element UI table组件可以通过设置fixedright属性实现列的固定&#xff0c;但是在某些情况下会导致固定列的样式错乱,只要刷新页面即出现表格错位问题,下面就总结下解决样式错乱实现方案 官方解决方案&#xff1a; 对 Table 进行重新布局。当 Table 或其…

安全防御:智能选路

目录 一、智能选路 1.1 就近选路 1.2 策略路由 1.3 虚拟系统---VRF 二、全局选路策略 1&#xff0c;基于链路带宽进行负载分担 2&#xff0c;基于链路质量进行负载分担 3&#xff0c;基于链路权重的负载分担 4&#xff0c;根据链路优先级的主备备份 DNS透明代理 一、…

vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps

前言&#xff1a; 查看vue终端默认地址 npm config get registry 结果&#xff1a;https://registry.npmjs.org/问题&#xff1a; 在拉取芋道源码前端的时候执行npm install 遇到问题如下&#xff1a;一直卡着不动 查看版本 按照网上方法更换镜像为阿里的&#xff0c;仍然不…

ORA-00756 ORA-10567故障处理---惜分飞

数据库异常断电之后&#xff0c;recover 报ORA-00756 ORA-10567等错 SQL> recover database; ORA-00756: 恢复操作检测到数据块写入丢失 ORA-10567: Redo is inconsistent with data block (file# 1,block# 113855,file offset is 932700160 bytes) ORA-10564: tablespace S…

搜维尔科技:【研究】触觉技术将在5年内以8种方式改变人们的世界

触觉技术在过去几年中发展迅猛&#xff0c;大大提高了反馈的精确度和真实度。其应用产生了真正的影响&#xff0c;数百家公司和企业都集成了触觉技术来增强培训和研究模拟。 虽然触觉技术主要用于 B2B 层面&#xff0c;但触觉技术可能会彻底改变我们的生活&#xff0c;尤其是通…

多类支持向量机损失(SVM损失)

(SVM) 损失。SVM 损失的设置是&#xff0c;SVM“希望”每个图像的正确类别的得分比错误类别高出一定幅度Δ。 即假设有一个分数集合s[13,−7,11] 如果y0为真实值&#xff0c;超参数为10&#xff0c;则该损失值为 超参数是指在机器学习算法的训练过程中需要设置的参数&#xf…

Spring Data Jpa 原生SQL联表查询返回自定义DTO

Spring Data Jpa 原生SQL联表查询返回自定义DTO 方案一&#xff1a;返回Map 这个就不说了 方案二&#xff1a;实体定义成接口的形式 该方式最直观&#xff01;&#xff01;推荐&#xff01;&#xff01;&#xff01; 注意&#xff1a;XxxDto是interface接口&#xff0c;而…

(算法)区间调度问题

问题大致如下所述&#xff1a;有n项工作,每项工作分别在s时间开始,在t时间结束. 对于每项工作,你都可以选择参与与否,如果选择了参与,那么自始至终都必须全程参与. 此外,参与工作的时间段不能重复(即使是开始的瞬间和结束的瞬间的重叠也是不允许的). 你的目标是参…

工业三防平板助力工厂生产数据实时管理

在当今高度数字化和智能化的工业生产环境中&#xff0c;工业三防平板正逐渐成为工厂实现生产数据实时管理的得力助手。这种创新的技术设备不仅能够在恶劣的工业环境中稳定运行&#xff0c;还为工厂的生产流程优化、效率提升和质量控制带来了前所未有的机遇。 工业生产场景通常充…

VTK----3D picking的原理、类型及实现

目录 3D picking概述 3D射线投射原理 VTK picking框架 vtkPicker(选Actor) vtkPointPicker(选点) vtkCellPicker(选单元) vtkAreaPicker(框选) 3D picking概述 3D picking 是一种在三维场景中确定用户点击或指向的对象的技术。这在3D应用程序和游戏中非常常见,…

继承和多态常见的面试问题

文章目录 概念问答 概念 下面哪种面向对象的方法可以让你变得富有( A) A: 继承 B: 封装 C: 多态 D: 抽象 (D )是面向对象程序设计语言中的一种机制。这种机制实现了方法的定义与具体的对象无关&#xff0c; 而对方法的调用则可以关联于具体的对象。 A: 继承 B: 模板 C: 对象的…

Android C++系列:Linux线程(三)线程属性

linux下线程的属性是可以根据实际项目需要,进行设置,之前我们讨论的线程都是采用线程的默认属性,默认属性已经可以解决绝大多数开发时遇到的问 题。如我们对程序的性能提出更高的要求那么需要设置线程属性,比如可以通过设置线程栈的大小来降低内存的使用,增加最大线程个数…

F5理念左移,实现API安全的全生命周期管理

API是我们现代数字生活中隐形的中枢神经系统&#xff0c;从远程医疗到在线银行&#xff0c;实时API让世界变得更美好。不可否认的是&#xff0c;当应用程序和架构发生变化时&#xff0c;攻击面也会随之变化。传统的安全措施&#xff0c;比如WAF、DDoS和Bot防护仍然必不可少&…

uniapp 微信默认地图选点功能实现

效果图 配置项 微信公众平台-小程序配置 uniapp配置 上代码 <template><view class"content"><button click"toMap">请选择位置</button></view> </template><script setup lang"ts">function toMa…

【BUG】已解决:ModuleNotFoundError: No module named ‘torch‘

已解决&#xff1a;ModuleNotFoundError: No module named ‘torch‘ 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市…

什么是 std::ios::sync_with_stdio(false)

介绍 std::ios::sync_with_stdio(false) 是 C 中的一个配置设置&#xff0c;用于控制标准 I/O 流&#xff08;如 std::cin, std::cout&#xff09;的行为。这个设置主要用于优化输入输出操作的性能&#xff0c;尤其是在处理大量数据时。 在 C 中&#xff0c;标准流库&#xf…

Langchain[4]:Langchain 0.2革命性突破:结合工具调用与结构化数据处理、@Chain修饰符使用,解决LLM输出难题,提升AI效能

Langchain[4]:Langchain 0.2革命性突破:结合工具调用与结构化数据处理,解决LLM输出难题,提升AI效能 1.工具调用 大型语言模型 (LLM) 可以通过工具调用功能与外部数据源交互。工具调用是一种强大的技术,允许开发人员构建复杂的应用程序,这些应用程序可以利用 LLM 访问、交…

前端书籍翻页效果

目录 前端书籍翻页效果前言代码示例创建模板页面css样式编写js代码 结论 前端书籍翻页效果 前端实现翻书效果&#xff0c;附带vue源码 源码下载地址 前言 实际业务开发中&#xff0c;有时候会遇到需要在前端页面内实现翻书效果的需求&#xff0c;本篇文章就为大家介绍如何使…