Skip to content

Element+

https://element-plus.gitee.io/zh-CN/

logo

什么是Element Plus

Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型。

设计原则

  • 一致 Consistency#

    • 与现实生活一致

    • 在界面中一致

  • 反馈 Feedback#

    • 控制反馈

    • 页面反馈

  • 效率 Efficiency#

    • 简化流程

    • 清晰明确

    • 帮助用户识别

  • 可控 Controllability#

    • 用户决策

    • 结果可控

主要组件

component

Hello World!

hello.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/element-plus.js"></script>
  <title>Element Plus demo</title>
</head>

<body>
  <div id="app" data-v-app="">
    <button class="el-button" aria-disabled="false" type="button">
      <!--v-if--><span class="">Hello Element Plus</span>
    </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>

使用包管理器

  1. 安装Node.js(https://npmmirror.com/mirrors/node/v22.8.0/node-v22.8.0-x64.msi)，安装后，打开命令行工具在命令行验证安装是否成功。
node -v