vue element plus 安装

环境支持#

Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器,请自行添加 Babel 和相应的 Polyfill 。

由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器。

Edge ≥ 79Firefox ≥ 78Chrome ≥ 64Safari ≥ 12

版本#

Element Plus 目前还处于快速开发迭代中。

使用包管理器#

我们建议您使用包管理器(如 NPM、Yarn 或 pnpm)安装 Element Plus,然后您就可以使用打包工具,例如 Vite 或 webpack。

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

如果您的网络环境不好,建议使用相关镜像服务 cnpm 或 中国 NPM 镜像。

浏览器直接引入#

直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 了。

根据不同的 CDN 提供商有不同的引入方式, 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。

unpkg#

<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>

jsDelivr#

<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

TIP

我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本,以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。

Hello World#

通过 CDN 的方式我们可以很容易地使用 Element Plus 写出一个 Hello world 页面。 在线演示

如果是通过包管理器安装,并希望配合打包工具使用,请阅读下一节:快速上手。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

信号-进程间通信

信号 1. 信号概述 在 Linux 操作系统中&#xff0c;信号是一种进程间通信的机制&#xff0c;用于通知进程发生了某个事件。信号可以由内核、其他进程&#xff0c;或者进程自身发送。每个信号都对应一个特定的事件或异常&#xff0c;例如进程终止、CtrlC 中断等。 本质上是一…

使用AUTOSAR来开发汽车基础软件的优点

1、高质量。以前我们采用手写代码的方式&#xff0c;是几个工程师在战斗。现在我们采用平台&#xff0c;BSW代码都是供应商提供的&#xff0c;我们相当于后面还有一个团队陪着我们在战斗。 2、低成本。大家都说采用AUTOSAR平台好贵&#xff0c;但是从长远来看是值得的&#xff…

利用虾皮Shopee API (shopee.item_get)提升电商平台用户转化率与客单价

在当今的电商环境中&#xff0c;用户转化率和客单价是衡量电商平台成功与否的关键指标。虾皮Shopee作为一个领先的电商平台&#xff0c;提供了丰富的API服务&#xff0c;其中shopee.item_get接口允许商家根据商品ID获取详细的商品信息。通过合理利用这一API&#xff0c;商家可以…

glusterFS

一. 概念 1. 介绍 gluster是一个横向扩展的分布式文件系统&#xff0c;可将来自多个服务器的磁盘存储资源整合到一个全局名称空间中&#xff0c;可以根据存储消耗需求快速调配额外的存储。它将自动故障转移作为主要功能. 分布式存储系统.集群式NAS存储.无集中式元数据服务,采…

笔记本摄像头模拟监控推送RTSP流

使用笔记本摄像头模拟监控推送RTSP流 一、基础安装软件准备 本文使用软件下载链接:下载地址 FFmpeg软件: Download ffmpeg 选择Windows builds by BtbN 一个完整的跨平台解决方案&#xff0c;用于录制、转换和流式传输音频和视频。 EasyDarwin软件&#xff1a;Download Easy…

激活函数整理

sigmoid函数 import torch from d2l import torch as d2l %matplotlib inline ​ xtorch.arange(-10,10,0.1,requires_gradTrue) sigmoidtorch.nn.Sigmoid() ysigmoid(x) ​ d2l.plot(x.detach(),y.detach(),x,sigmoid(x),figsize(5,2.5)) sigmoid函数连续、光滑、单调递增&am…

java数据结构与算法刷题-----LeetCode343. 整数拆分(TODO)

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 很多人觉得动态规划很难&#xff0c;但它就是固定套路而已。其实动态规划只…

C++力扣题目226--翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1]示例 3&#x…

【算法与数据结构】746、LeetCode使用最小花费爬楼梯

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题可以从0阶或者1阶台阶开始&#xff0c;每次爬楼梯所需的花费是之前的花费dp[i]从本层向上爬所需的…

入门实战丨Python小游戏经典案例

文章目录 写在前面判断与循环小游戏猜数游戏龙的世界 写在后面 写在前面 本期内容&#xff1a;两个个简单的Python小游戏入门案例。 实验需求&#xff1a;python 实验目标&#xff1a;掌握基本的判断与循环语句。 判断与循环 判断与循环是编程中非常重要的两个概念&#x…

机器学习顶会ICML 2024今日开放投稿,CCF A类,中稿率27.94%(附ICML23杰出论文+18篇高分论文)

ICML 2024今天开放投稿了&#xff01;距离截稿还有24天&#xff0c;想冲ICML的同学速度&#xff01; ICML 全称 International Conference on Machine Learning&#xff0c;由国际机器学习学会&#xff08;IMLS&#xff09;举办&#xff0c;与NIPS一同被认为是人工智能、机器学…

面试宝典进阶之redis缓存面试题

R1、【初级】Redis常用的数据类型有哪些&#xff1f; &#xff08;1&#xff09;String&#xff08;字符串&#xff09; &#xff08;2&#xff09;Hash&#xff08;哈希&#xff09; &#xff08;3&#xff09;List&#xff08;列表&#xff09; &#xff08;4&#xff09;Se…

程序员面试技巧:成为HR心动的程序猿

文章目录 程序员必备的面试技巧导语一、准备充分二、突出亮点三、展示解决问题的能力四、良好的沟通能力五、积极展示学习态度示例结语&#x1f636; 写在结尾 程序员必备的面试技巧 “程序员必备的面试技巧&#xff0c;就像是编写一段完美的代码一样重要。在面试战场上&#…

vue3 +TS 安装使用pinia状态管理

目录 一.安装 1.下载安装依赖 2.创建src/stores/index.ts文件 3.创建src/stores/states.ts文件 4.创建src/stores/interface/index.ts文件 5.修改main.ts 6.目录结构如下 7.测试使用 8.去到首页点击按钮&#xff0c;打开控制台查看 一.安装 1.下载安装依赖 npm insta…

人类认知中的等价机理与机器智能中等价机理

人类认知中的等价机理是指人们在认知过程中&#xff0c;通过将不同的概念、事物或情境进行等价替代&#xff0c;从而实现思维的连贯和理解的补充。例如&#xff0c;当人们看到一个陌生的动物时&#xff0c;可以将它与已知的动物进行等价对应&#xff0c;从而理解其特征和行为。…

基于SpringBoot的毕业生实习与就业管理系统(系统+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、绪论 1. 研究背景 现在大家…

私域流量转化差,这些问题你都解决了吗?

一、流量不精准 这是一个常见而又经常被忽视的问题。许多企业在私域运营中面临转化率低下的问题&#xff0c;但有没有想过&#xff0c;这可能只是因为你吸引的流量与你的产品不匹配&#xff1f; 从公域引流到私域&#xff0c;数量并非唯一关键&#xff0c;精准度更是重中之重…

如何在移动应用程序的 POC、原型和 MVP 之间做出选择?

许多企业家、企业和行业在决定是否将移动应用程序开发理念作为概念验证 (POC)、最小可行产品 (MVP)、原型或组合来推进时面临着挑战。 由于这三种方法对其利用都有各自的影响&#xff0c;因此正确理解每个方面并选择合适的方法将有助于利益相关者最大限度地提高其想法在用户和所…

送货单打印要用什么打印机和软件

在打印送货单时&#xff0c;打印机和软件的选择都是非常重要的。根据需求&#xff0c;可以选择喷墨打印机、激光打印机或针式打印机等类型&#xff0c;而软件我们可以选择专业的送货单打印软件&#xff0c;例如&#xff1a;方可销售送货单软件&#xff08;推荐&#xff09;就是…

Banner设计专家详细解释和使用技巧!

一、banner的作用 宝安在运营工作中具有吸引注意力、提高转化率、传达信息、提升品牌形象、引导用户行为、营造活动氛围等多种功能。因此&#xff0c;在运营工作中&#xff0c;需要根据具体需要和目标精心设计和合理使用宝安&#xff0c;才能达到更好的运营效果。 二、banner…