Installing ElementPlus

Environment

Modern browser


Edge	last 2 versions	last 2 versions	last 2 versions

Since Vue3 no longer supports IE11, ElementPlus does not support IE11 and previous versions.

Current latest version

ElementPlus is currently in a rapid development iteration:

Install via npm or yarn

We recommend using the package manager to install ElementPlus, so that you can utilize bundlers like vite and webpack.

$ npm install element-plus --save

$ yarn add element-plus

If your network environment is not good, it is recommended to use a mirror registry

Browser direct introducing

Directly import ElementPlus through browser HTML tags, and use ElementPlus globally

Introduce ElementPlus in full through CDN. According to different CDN providers, there are different introduction methods. Here we use unpkg andjsdelivr For example, You can also use other CDN providers.

Use unpkg

<head>
  <!-- Introduce style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
  <!-- Introduce Vue -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- Introduce component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

Use jsDelivr

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

:::tip We recommend using CDN to introduce ElementPlus users to lock the version on the link address, so as not to be affected by incompatible updates when ElementPlus is upgraded in the future. Please check unpkg.com for the method to lock the version. :::

Hello world

With CDN, we can easily use ElementPlus to write a Hello world page. Online Demo

If you are installing via npm / yarn and want to use it with a packaging tool, please read the next section: Quick Start.

3.1 KiB Raw Blame History