Element Plus 组件库安装指南

2026-02-04 04:15:21作者：何将鹤

🎉 A Vue.js 3 UI Library made by Element team

项目地址：https://gitcode.com/GitHub_Trending/el/element-plus

Element Plus 是基于 Vue 3 的桌面端组件库，提供了丰富的 UI 组件和交互功能。本文将详细介绍如何在不同环境中安装和使用 Element Plus。

浏览器兼容性说明

Element Plus 2.5.0+ 版本支持以下浏览器的最新两个版本：

Chrome ≥85
Edge ≥85
Firefox ≥79
Safari ≥14.1

重要提示：由于 Vue 3 已不再支持 IE11，Element Plus 同样不支持 IE 浏览器。如需兼容旧版浏览器，需要自行添加 Babel 和 Polyfill。

Sass 预处理要求

从 2.8.5 版本开始，Element Plus 要求 Sass 的最低版本为 1.79.0。如果遇到 legacy JS API Deprecation Warning 警告，可以在 Vite 配置中添加以下代码：

css: {
  preprocessorOptions: {
    scss: { api: 'modern-compiler' }
  }
}

推荐安装方式：包管理器

使用包管理器（npm、yarn 或 pnpm）安装是最推荐的方式，可以更好地与现代构建工具（如 Vite 和 webpack）集成。

npm 安装

npm install element-plus --save

yarn 安装

yarn add element-plus

pnpm 安装

pnpm install element-plus

网络环境不佳时，建议使用国内镜像源：
npm config set registry https://registry.npmmirror.com

浏览器直接引入方式

如果不使用构建工具，可以直接通过 CDN 在 HTML 中引入 Element Plus。

使用 unpkg CDN

<head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 引入 Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 引入组件库 -->
  <script src="//unpkg.com/element-plus"></script>
</head>

使用 jsDelivr CDN

<head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <!-- 引入 Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- 引入组件库 -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

重要提示：

建议在 CDN 链接中锁定版本号，避免未来版本更新导致兼容性问题

由于 HTML 解析限制，请使用双闭合标签而非单闭合标签

快速体验示例

下面是一个使用 CDN 引入的简单示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Element Plus Demo</title>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
  <script src="//unpkg.com/vue@3"></script>
  <script src="//unpkg.com/element-plus"></script>
</head>
<body>
  <div id="app">
    <el-button type="primary" @click="visible = true">点击我</el-button>
    <el-dialog v-model="visible" title="欢迎">
      <p>欢迎使用 Element Plus！</p>
    </el-dialog>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const visible = ref(false)
        return { visible }
      }
    }).use(ElementPlus).mount('#app')
  </script>
</body>
</html>

后续步骤

如果使用包管理器安装，建议继续阅读 Element Plus 的快速开始指南，了解如何在构建工具中配置和使用组件库。

🎉 A Vue.js 3 UI Library made by Element team

项目地址：https://gitcode.com/GitHub_Trending/el/element-plus

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

flutter_flutter

Oohos_react_native

React Native鸿蒙化仓库

昇腾LLM分布式训练框架

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统