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://www.mzph.cn/news/872913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

光热熔盐储能

长时储能的新赛道上&#xff0c;多种技术正在加速竞逐&#xff0c;谁最有可能成为其中的王者&#xff1f; 液流电池、压缩空气储能、重力储能&#xff1f;储能行业的玩家们通常不会想到的答案是光热熔盐储能。 1 基础的原理 光热发电系统包括太阳能集热、传储热、发电三大模…

DP讨论——适配器、桥接、代理、装饰器模式通用理解

学而时习之&#xff0c;温故而知新。 共性 适配器、桥接、代理和装饰器模式&#xff0c;实现上基本没啥区别&#xff0c;怎么区分&#xff1f;只能从上下文理解&#xff0c;看目的是啥。 它们&#xff0c;我左看上看下看右看&#xff0c;发现理解可以这么简单:都是A类调用B/…

MK米客方德推出新一代工业级SD NAND

--更长寿命、更高速度、更优功耗 目录 --更长寿命、更高速度、更优功耗 1.LGA-8封装&#xff1a; 2.工业级SLC存储颗粒&#xff1a; 3.高IOPS性能&#xff1a; 4.健康状态侦测(Smart Function)&#xff1a; 5.内嵌ECC校验、坏块管理、垃圾回收、磨损平均算法等功能。 6…

大厂面试官问我:Redis为什么使用哈希槽的方式进行数据分片?为什么不适用一致性哈希的方式?【后端八股文十三:Redis 集群哈希八股文合集(1)】

本文为【Redis 集群哈希 八股文合集&#xff08;1&#xff09;】初版&#xff0c;后续还会进行优化更新&#xff0c;欢迎大家关注交流~ hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注…

whisper-api语音识别语音翻译高性能兼容openai接口协议的开源项目

whisper-api 介绍 使用openai的开源项目winsper语音识别开源模型封装成openai chatgpt兼容接口 软件架构 使用uvicorn、fastapi、openai-whisper等开源库实现高性能接口 更多介绍 [https://blog.csdn.net/weixin_40986713/article/details/138712293](https://blog.csdn.n…

leetcode-46. 全排列

题目描述 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a; 输入&#xf…

【ELK+Kafka+filebeat分布式日志收集】分布式日志收集详解

分布式日志收集是一种用于在分布式系统中收集、聚合、存储和分析日志数据的技术。随着系统规模的扩大和分布式架构的普及,单节点的日志收集和处理方案已经难以满足需求。因此,分布式日志收集系统应运而生。以下是分布式日志收集的详细讲解: 一、背景 1、为什么需要分布式日…

百日筑基第二十三天-23种设计模式-创建型总汇

百日筑基第二十三天-23种设计模式-创建型总汇 前言 设计模式可以说是对于七大设计原则的实现。 总体来说设计模式分为三大类&#xff1a; 创建型模式&#xff0c;共五种&#xff1a;单例模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式。结构型模式&#xff0c;共…

防洪墙的安全内容检测+http请求头

1、华为的IAE引擎&#xff1a;内部工作过程 IAE引擎主要是针对2-7层进行一个数据内容的检测 --1、深度检测技术 (DPI和DPF是所有内容检测都必须要用到的技术) ---1、DPI--深度包检测&#xff0c;针对完整的数据包&#xff0c;进行内容的识别和检测 1、基于特征子的检…

Windows图形界面(GUI)-DLG-C/C++ - 列表视图(ListView)

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​​​​链接点击跳转博客主页 目录 列表视图(ListView) 控件类型 初始化控件环境 示例代码 列表视图(ListView) 控件类型 详细信息视图&#xff08;Report View&#xff09;&#xff1a;数据以列的形式显示&…

Collections.unmodifiableList

Collections.unmodifiableList 是 Java Collections Framework 提供的一个方法&#xff0c;用于创建一个不可修改的视图&#xff08;unmodifiable view&#xff09;列表。这个方法返回的列表是对原始列表的一个包装&#xff0c;任何对这个包装列表的修改操作都会抛出 Unsupport…

数据分析01——系统认识数据分析

1.数据分析的全貌 1.1观测 1.1.1 观察 &#xff08;1&#xff09;采集数据 a.采集数据&#xff1a;解析系统日志 当你在看视频的时候———就会产生日志———解析日志———得到数据 b.采集数据&#xff1a;埋点获取新数据&#xff08;自定义记录新的信息&#xff09; 日志…

vue3中的watch函数

watch函数 作用&#xff1a;监听数一个或者多个数据的变化&#xff0c;数据变化时执行回调函数&#xff0c;两个额外的参数&#xff1a;1、immediate&#xff08;立即执行&#xff09;2、deep&#xff08;深度监听&#xff09; 监听单个数据&#xff1a; <script setup&g…

【Vue】Vue3 安装 Tailwind CSS 入门

初始化 Vue 3 项目 npm install -g vue/cli vue create my-project安装 Tailwind CSS 进入你的项目目录&#xff0c;然后安装 Tailwind CSS 和其依赖项&#xff1a; npm install -D tailwindcss postcss autoprefixer配置 PostCSS Tailwind CSS 需要通过 PostCSS 进行处理。…

Python酷库之旅-第三方库Pandas(029)

目录 一、用法精讲 74、pandas.api.interchange.from_dataframe函数 74-1、语法 74-2、参数 74-3、功能 74-4、返回值 74-5、说明 74-6、用法 74-6-1、数据准备 74-6-2、代码示例 74-6-3、结果输出 75、pandas.Series类 75-1、语法 75-2、参数 75-3、功能 75-4…

单例模式 单例模式在多线程中是否线程安全, 如何保证线程安全。

单例模式 顾名思义就是在整个运行时域&#xff0c;一个类只有一个实例对象 懒汉式和饿汉式 1.懒汉式&#xff1a;类加载时不实例化&#xff0c;在第一次被调用时才进行实例化 下面展示一个 单例模式懒汉式代码片。 package com.haina.java08;public class Single {//构造器私…

mybatis-plus getMap sum求和 between时间查询

oracle 语法 QueryWrapper<Xxxx> eq new QueryWrapper<Xxxx>().select("NVL(sum(AAA),0) AS AA","NVL(sum(BBB),0) AS BB","NVL(sum(CCC),0) AS CC").eq("T_ID", id).apply("CREATE_TIME between to_date({0}, YYYY…

牛客 7.13 月赛(留 C逆元 Ddp)

B-最少剩几个&#xff1f;_牛客小白月赛98 (nowcoder.com) 思路 奇数偶数 奇数&#xff1b;奇数*偶数 奇数 所以在既有奇数又有偶数时&#xff0c;两者结合可以同时删除 先分别统计奇数&#xff0c;偶数个数 若偶个数大于奇个数&#xff0c;答案是偶个数-奇个数 若奇个数…

六边形动态特效404单页HTML源码

源码介绍 动态悬浮的六边形,旁边404文字以及跳转按钮,整体看着像科技二次元画风,页面简约美观,可以做网站错误页或者丢失页面,将下面的代码放到空白的HTML里面,然后上传到服务器里面,设置好重定向即可 效果预览 完整源码 <!DOCTYPE html> <html><head…

【17】Android 线程间通信(二) - Handler

概述 记得上篇文章我们留下的问题吗&#xff1f;如果还没有看过上一篇讲解Handler基本原理文章的同学可以补一下知识。Android 线程间通信(一) - Handler 回到正题&#xff0c;这次我们将一下上一篇文章留下问题中的几个&#xff0c;idleHandler & syncBarrier。 同步屏…