安装 ​

兼容性 2.5.0 ​

Element Plus Mobile 可以在支持最后 2 个版本的浏览器上运行。

如果您确实需要支持过时的浏览器，请自行添加 Babel 和 Polyfill。

由于Vue 3不再支持IE11，Element Plus Mobile也不支持IE。

版本Chrome
Chrome		IE
边缘		火狐
火狐		Safari
Safari
< 2.5.0铬≥64边缘≥79火狐 ≥ 78狩猎 ≥ 12
2.5.0 +铬≥85边缘≥85火狐 ≥ 79Safari ≥ 14.1

萨斯 ​

版本2.8.5及更高版本，Sass的最低兼容版本为1.79.0。

如果您的终端提示legacy JS API Deprecation Warning，您可以在vite.config.ts中配置以下代码。

vite.config.ts
ts
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: { api: 'modern-compiler' },
    },
  },
  // ...
})

版本 ​

Element Plus Mobile 目前正在积极开发中。 ElementPlus移动版徽章

另外，dev分支上的每一次commit和PR都会发布到pkg.pr.new，如果你想使用一些未发布的内容，可以参考这里。

使用包管理器 ​

我们建议使用包管理器（NPM、Yarn、PNPM) 安装 Element Plus Mobile， 这样您就可以使用 Vite 和 Webpack。

选择您喜欢的包管理器。

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

如果您的网络环境不好，建议使用镜像注册表cnpm或npmmirror。

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

在浏览器中导入 ​

直接通过浏览器HTML标签导入Element Plus Mobile，并使用全局变量ElementPlusMobile。

根据不同的CDN提供商，有不同的引入方式。 这里我们以 unpkg 和 jsDelivr 为例。 您还可以使用其他 CDN 提供商。

html
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//unpkg.com/element-plus-mobile/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus-mobile"></script>
</head>
html
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus-mobile/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-mobile"></script>
</head>

TIP

我们建议使用 CDN 导入锁定版本的 Element Plus Mobile 链接地址上，以免Element Plus Mobile时受到不兼容更新的影响 未来还会升级。请检查unpkg.com 锁定版本的方法。

由于原生HTML解析行为的限制，单封闭标签可能会导致一些异常，所以请使用双封闭标签，参考

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

你好世界 ​

有了CDN，我们可以轻松使用Element Plus Mobile 编写一个 Hello World 页面。 在线演示

如果您通过包管理器安装并希望将其与 打包工具，请阅读 下一节：快速入门。