Instalación ​

Compatibility 2.5.0 ​

Element Plus can run on browsers that support last 2 versions.

If you really need to support outdated browsers, please add Babel and Polyfill yourself.

Since Vue 3 no longer supports IE11, Element Plus does not support IE either.

versionChrome
Chrome		IE
Edge		Firefox
Firefox		Safari
Safari
< 2.5.0Chrome ≥ 64Edge ≥ 79Firefox ≥ 78Safari ≥ 12
2.5.0 +Chrome ≥ 85Edge ≥ 85Firefox ≥ 79Safari ≥ 14.1

Sass ​

Version 2.8.5 and later, the minimum compatible version of Sass is 1.79.0.

If your terminal prompts legacy JS API Deprecation Warning, you can configure the following code in vite.config.ts.

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

Versión ​

Element Plus is currently in a rapid development iteration. Insignia de versión ElementPlus

In addition, every commit and PR on the dev branch will be published to pkg.pr.new, if you want to use some unpublished content, you can refer to here.

Gestor de paquetes ​

Se recomienda el uso del administrador de paquetes (NPM, Yarn, pnpm) para instalar Element Plus, pero también puede utilizar otros gestores como Vite y webpack.

Choose a package manager you like.

shell
$ npm install element-plus --save
shell
$ yarn add element-plus
shell
$ pnpm install element-plus

If your network environment is not good, it is recommended to use a mirror registry cnpm or npmmirror.

shell
npm config set registry https://registry.npmmirror.com

Importar en el navegador ​

Puede importar Element Plus directamente a las etiquetas HTML del navegador y utilizar la variable global ElementPlus.

Según los diferentes proveedores de CDN hay diferentes URLs de importación. Aquí usamos unpkg y jsDelivr como ejemplo. También puede utilizar otros proveedores CDN.

unpkg ​

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

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

::: consejo

Recomendamos usar CDN para importar Element Plus. Empleándolo podrá bloquear la versión en la dirección del enlace, y no verse afectado por actualizaciones incompatibles cuando Element Plus se actualice en el futuro. Por favor, consulte unpkg.com para ver cómo fijar una determinada versión.

Due to the limitations of native HTML parsing behavior, single-closed tags may cause some exceptions, so please use double-closed tags, reference

html
<!-- examples -->
<el-table>
  <el-table-column></el-table-column>
  <el-table-column></el-table-column>
</el-table>

:::

Hello World ​

Con CDN, podemos usar Element Plus fácilmente para escribir una página de Hola Mundo. Online Demo

Si se ha instalado a través del gestor de paquetes y quiere usarlo con una herramienta de empaquetado, por favor lea la siguiente sección: Inicio rápido.