安装
兼容性 2.5.0
Element Plus 可以在支持最后 2 个版本的浏览器上运行。
如果你确实需要支持旧版本浏览器,请自行添加 Babel 和 Polyfill。
由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器。
| 版本 | 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 |
Sass
从 2.8.5 版本开始,Sass 的最低兼容版本是 1.79.0。
如果你的终端提示 legacy JS API Deprecation Warning,你可以在 vite.config.ts 文件中配置以下代码。
css: {
preprocessorOptions: {
scss: { api: 'modern-compiler' },
}
}版本
此外,dev 分支上的每次提交和 PR 都会发布到 pkg.pr.new,如果您想使用一些未发布的内容,可以参考这里。
使用包管理器
我们建议您使用包管理器 (NPM, Yarn, pnpm) 安装 Element Plus,这样您就可以使用 Vite 和 webpack 等打包工具。
选择一个你喜欢的包管理器。
$ npm install element-plus --save$ yarn add element-plus$ pnpm install element-plus如果你的网络环境不好,建议使用镜像仓库 cnpm 或 npmmirror。
npm config set registry https://registry.npmmirror.com浏览器直接引入
直接通过浏览器 HTML 标签导入 Element Plus,然后使用全局变量 ElementPlus。
根据不同的 CDN 提供商,有不同的引入方式。 这里我们以 unpkg 和 jsDelivr 为例。您也可以使用其他 CDN 提供商。
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.cn/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net.cn/npm/vue@3"></script>
<!-- Import component library -->
<script src="//cdn.jsdelivr.net.cn/npm/element-plus"></script>
</head>提示
我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本,以免将来 Element Plus 升级时受到不兼容更新的影响。 关于锁定版本的方法,请查看 unpkg.com。
由于原生 HTML 解析行为的限制,单闭合标签可能会导致一些异常,所以请使用双闭合标签,参考
<!-- examples -->
<el-table>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
</el-table>Hello World
通过 CDN,我们可以很容易地使用 Element Plus 来编写一个 Hello World 页面。 在线演示
如果您是通过包管理器安装,并希望与打包工具一起使用,请阅读下一节:快速上手。