Element Plus 组件库安装指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00618/article/details/148360994

Element Plus 组件库安装指南

element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。项目地址: https://gitcode.com/gh_mirrors/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>