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 --><linkrel="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 页面。 在线演示

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

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

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

相关文章

第87讲:XtraBackup备份工具的核心技术要点及全库备份、恢复案例

文章目录 1.XtraBackup备份工具的简介2.XBK备份工具的安装3.XBK备份工具的使用语法4.XBK备份前的准备5.使用XBK对全库进行备份5.1.XBK备份全库数据的语法格式5.2.使用XBK进行全库备份5.3.查看XBK备份的数据文件5.4.备份过程中生产的XBK文件 6.模拟故障案例并使用XBK恢复备份的数…

人工智能:未来智慧城市建设的“智慧大脑”与核心价值

目录 一、引言 二、人工智能在智慧城市中的应用实例 三、人工智能对智慧城市建设的核心价值 四、面临的挑战与未来展望 五、结语 六、附&#xff1a;智慧城市全套解决方案大合集 - 下载 一、引言 随着科技的飞速发展&#xff0c;智慧城市的概念逐渐深入人心。智慧城市利…

nginx+keepalived双主模式双主热备

目录 一、双主模式原理 1. nginxkeepalived主备模式缺点 2. 主备模式和双主模式的区别 二、配置文件 1. nginx01的keepalived.conf 2. nginx02的keepalived.conf 3. 检测nginx存活脚本文件nginx_check.sh 三、测试准备 1. 启动nginx01、nginx02 2. 启动keepalived 3. 查看网卡信…

【REST2SQL】07 GO 操作 Mysql 数据库

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】06 GO 跨包接口重构代码 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xf…

树莓派非常实用的程序-2 vcgencmd

vcgencmd 工具用于从Raspberry Pi上的VideoCore GPU输出信息。您可以在 https://github.com/raspberrypi/userland/tree/master/host_applications/linux/apps/gencmd[Github].上找到 vcgencmd 实用程序的源代码。要获取支持的所有 vcgencmd 命令的列表&#xff0c;请使用 vcge…

【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

1、 Hue的安装 1.1 上传解压安装包 Hue的安装支持多种方式&#xff0c;包括rpm包的方式进行安装、tar.gz包的方式进行安装以及cloudera manager的方式来进行安装等&#xff0c;我们这里使用tar.gz包的方式来进行安装 Hue的压缩包的下载地址&#xff1a; http://archive.cloude…

网络安全B模块(笔记详解)- 漏洞扫描与利用

漏洞扫描与利用 1.通过Kali对服务器场景server2003以半开放式不进行ping的扫描方式并配合a,要求扫描信息输出格式为xml文件格式,从生成扫描结果获取局域网(例如172.16.101.0/24)中存活靶机,以xml格式向指定文件输出信息(使用工具Nmap,使用必须要使用的参数),并将该操…

Java中什么是多线程?

Java是一种支持多线程编程的编程语言&#xff0c;它提供了内置的多线程支持&#xff0c;使得开发者能够创建并发执行的程序。多线程是一种在同一程序中同时执行多个线程的机制&#xff0c;每个线程都是独立运行的&#xff0c;并且可以共享相同的资源。在Java中&#xff0c;多线…

Leo赠书活动-15期 语义解析:自然语言生成SQL与知识图谱问答实战

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

python_selenium_安装基础学习

目录 1.为什么使用selenium 2.安装selenium 2.1Chrome浏览器 2.2驱动 2.3下载selenium 2.4测试连接 3.selenium元素定位 3.1根据id来找到对象 3.2根据标签属性的属性值来获取对象 3.3根据xpath语句来获取对象 3.4根据标签的名字获取对象 3.5使用bs4的语法来获取对象…

C#基础-空处理

在c#中&#xff0c;值对象是没有办法赋值为null的。比如说&#xff0c;你想要定义一个布尔值&#xff0c;你的赋值数据要么得是true、要么就得是false&#xff0c;默认情况下我们永远没可能给这个布尔赋值为null&#xff0c;即使只是对这个变量进行声明而不初始化数据&#xff…

【算法每日一练]-动态规划 (保姆级教程 篇15) #纸带 #围栏木桩 #四柱河内塔

目录 今日知识点&#xff1a; 计算最长子序列的方案个数&#xff0c;类似最短路径个数问题 四柱河内塔问题&#xff1a;dp[i]min{ (p[i-k]f[k])dp[i-k] } 纸带 围栏木桩 四柱河内塔 纸带 思路&#xff1a; 我们先设置dp[i]表示从i到n的方案数。 那么减法操作中&#xff…