qinshan.top

Appearance

Element Plus ​

基于 Vue 3，面向设计师和开发者的组件库

设计原则 ​

Consistency、Feedback、Efficiency、Controllability

一致 Consistency ​

  • 与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  • 在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback ​

  • 控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  • 页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency ​

  • 简化流程： 设计简洁直观的操作流程；
  • 清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策；
  • 帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability ​

  • 用户决策： 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  • 结果可控： 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

导航 ​

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。 一般导航会有「侧栏导航」和「顶部导航」2 种类型。

选择合适的导航 ​

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确）。 以下是「侧栏导航」和 「顶部导航」的区别。

侧栏导航 ​

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换； 顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。 适用于中后台的管理型、工具型网站。

一级类目 ​

适用于结构简单的网站：只有一级页面时。 不需要使用面包屑。

二级类目 ​

侧栏中最多可显示两级导航； 侧栏中最多可显示两级导航； 当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

三级类目 ​

适用于较复杂的工具型后台。 适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

顶部导航 ​

顺应了从上至下的正常浏览顺序，方便浏览信息； 顶部宽度限制了导航的数量和文本长度。

适用于导航较少，页面篇幅较长的网站。

安装 ​

兼容性2.5.0 ​

Element Plus 支持最近两个版本的浏览器。

如果您需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

版本ChromeEdgeFirefoxSafari
< 2.5.0Chrome ≥ 64Edge ≥ 79Firefox ≥ 78Safari ≥ 12
2.5.0 +Chrome ≥ 85Edge ≥ 85Firefox ≥ 79Safari ≥ 14.1

Sass ​

在2.8.5及以后的版本, Sass 的最低支持版本为 1.79.0.

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

ts

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

版本 ​

Element Plus 目前还处于快速开发迭代中。

此外，在dev 分支上的每个提交和 PR 都将被发布到 pkg.pr.new，如果您想要使用一些未发布的内容，您可以参考 这里。

使用包管理器 ​

我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，然后您就可以使用打包工具，例如 Vite 或 webpack。

shell
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

如果您的网络环境不好，建议使用相关镜像服务 cnpm 或 中国 NPM 镜像。

浏览器直接引入 ​

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了。

根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 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>

TIP

我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。

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

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

Hello World ​

html
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>

通过 CDN 的方式我们可以很容易地使用 Element Plus 写出一个 Hello world 页面。

如果是通过包管理器安装，并希望配合打包工具使用，请阅读下一节：快速上手。

更新时间: