mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00

docs: add single closed tag tip for using CDN in HTML (#17404 )

* docs: add useing cdn tips

* docs: add useing cdn tips

2024-07-07 08:46:45 +08:00

4.9 KiB

Raw Blame History

title	lang
Installation	en-US

Installation

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.

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

Version

Element Plus is currently in a rapid development iteration.

Using Package Manager

We recommend using the package manager (NPM, Yarn, pnpm) to install Element Plus, so that you can utilize bundlers like Vite and webpack.

# Choose a package manager you like.

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

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

Import in Browser

Import Element Plus through browser HTML tags directly, and use global variable ElementPlus.

According to different CDN providers, there are different introduction methods. Here we use unpkg and jsDelivr as example. You can also use other CDN providers.

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

:::tip

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

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

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

:::

Hello World

With CDN, we can easily use Element Plus to write a Hello World page. Online Demo

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

4.9 KiB Raw Blame History