ElementPlus入门教程：轻松上手组件库

ElementPlus是Element UI的Vue 3版本，提供了丰富的桌面端组件集，方便开发者构建美观、易用的Web应用。它支持模块化设计、响应式布局和国际化，具有良好的性能和可维护性。ElementPlus还提供了详尽的文档和活跃的社区支持，帮助开发者快速上手和解决问题。

ElementPlus是什么

ElementPlus是Element UI的Vue 3版本，它是一个基于Vue 3的桌面端组件库，提供了一套完善的UI组件集，可以方便地帮助开发者构建美观、易用、响应式的Web应用。ElementPlus继承了Element UI的众多优点，并且针对Vue 3进行了优化，使得开发者可以更便捷地使用现代化的前端技术。

ElementPlus的特点

• 模块化设计：ElementPlus采用了模块化的组件设计，每个组件都是独立的，可以单独引入和使用。这可以在项目中按需引入所需的组件，减少代码量，提升应用性能。
• 丰富的组件：ElementPlus提供了丰富的组件，包括按钮、输入框、表格、对话框等，涵盖了大部分常见的UI需求，可以满足不同项目的需求。
• 易用性：ElementPlus的组件设计简洁、易用，提供了丰富的配置选项，使得开发者可以根据需要快速构建出美观、功能完备的UI界面。
• 响应式设计：ElementPlus的组件支持响应式布局，可以自适应不同设备的屏幕尺寸，使得应用在不同设备上都能保持良好的用户体验。
• 国际化支持：ElementPlus内置了国际化支持，可以轻松地实现多语言切换，使得应用可以适应不同的用户群体。
• 文档与社区支持：ElementPlus提供了详细的文档和活跃的社区支持，开发者可以方便地获取帮助和解决问题。

ElementPlus的优势

• 性能优化：ElementPlus针对Vue 3进行了优化，使用了Vue 3的新特性，如组合式API、Teleport等，提升了组件的性能。
• 可维护性：模块化设计使得ElementPlus的组件易于维护和扩展，开发者可以方便地根据项目需求定制和扩展组件。
• 一致性：ElementPlus提供了统一的样式和交互规范，使得整个应用界面保持一致，提升了用户体验。
• 兼容性：ElementPlus支持主流的浏览器和操作系统，具有良好的兼容性，可以在不同的环境中正常运行。

如何安装ElementPlus

安装ElementPlus有两种方式：

1. 使用npm安装

   npm install element-plus --save

2. 使用CDN引入

   <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/index.css">
   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/element-plus"></script>

配置ElementPlus环境

在Vue项目中使用ElementPlus，需要进行一些配置步骤：

1. 全局引入

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';
   
   const app = createApp(App);
   app.use(ElementPlus);
   app.mount('#app');

2. 按需引入

   // babel-plugin-component配置
   {
    "libraryName": "element-plus",
    "style": true
   }

3. 配置别名

   // webpack.config.js
   module.exports = {
    //...
    resolve: {
      alias: {
        'element-ui': 'element-plus',
        'element-ui/lib/theme-chalk/index.css': 'element-plus/lib/theme-chalk/index.css'
      }
    }
   };

快速开始使用ElementPlus

在Vue项目中，可以通过以下步骤快速开始使用ElementPlus：

1. 引入组件

   <template>
    <el-button type="primary">按钮</el-button>
   </template>
   
   <script>
   import { defineComponent } from 'vue';
   import { ElButton } from 'element-plus';
   
   export default defineComponent({
    components: {
      ElButton
    }
   });
   </script>

2. 使用组件

   <template>
    <el-button type="primary">按钮</el-button>
   </template>
   
   <script>
   import { defineComponent } from 'vue';
   
   export default defineComponent({
    components: {
      ElButton: () => import('element-plus/packages/button')
    }
   });
   </script>

Button按钮组件

Button组件用于创建按钮，支持多种类型和样式。

基本用法

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</template>

带图标的按钮

<template>
  <el-button type="primary" icon="el-icon-edit">编辑</el-button>
  <el-button type="success" icon="el-icon-check">成功</el-button>
  <el-button type="info" icon="el-icon-message">信息</el-button>
  <el-button type="warning" icon="el-icon-star-off">警告</el-button>
  <el-button type="danger" icon="el-icon-delete">删除</el-button>
</template>

链接按钮

<template>
  <el-button type="text">文本按钮</el-button>
</template>

按钮组

<template>
  <el-button-group>
    <el-button type="primary" icon="el-icon-edit">编辑</el-button>
    <el-button type="primary" icon="el-icon-share">分享</el-button>
    <el-button type="primary" icon="el-icon-delete">删除</el-button>
  </el-button-group>
</template>

Input输入框组件

Input组件用于创建输入框，支持文本输入、密码输入等多种类型。

基本用法

<template>
  <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const input = ref('');

    return {
      input
    };
  }
});
</script>

可清空输入框

<template>
  <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const input = ref('');

    return {
      input
    };
  }
});
</script>

可编辑的表单元素

<template>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const input = ref('');

    return {
      input
    };
  }
});
</script>

Table表格组件

Table组件用于创建表格，支持数据展示、排序、分页等功能。

基本用法

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ]);

    return {
      tableData
    };
  }
});
</script>

可编辑的表格

<template>
  <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ]);

    const handleCellClick = (row, column, cell, event) => {
      console.log(row, column, cell, event);
    };

    return {
      tableData,
      handleCellClick
    };
  }
});
</script>

Message消息通知组件

Message组件用于在页面中显示消息提示框，支持多种类型的消息通知。

基本用法

import { message } from 'element-plus';

message('这是一条消息提示');

不同类型的提示

import { message } from 'element-plus';

message.success('这是一条成功提示');
message.info('这是一条信息提示');
message.warning('这是一条警告提示');
message.error('这是一条错误提示');

带有自定义内容的提示

import { message } from 'element-plus';

message({
  message: '这是一条带自定义内容的消息提示',
  type: 'success',
  duration: 5000
});

修改全局样式

ElementPlus提供了主题切换功能，可以通过修改全局样式来改变整个应用的主题颜色。

修改主题颜色

/* main.css */
:root {
  --el-color-primary: #409eff;
  --el-color-primary-light-7: #b3d8ff;
  --el-color-primary-light-8: #8dc1ff;
  --el-color-primary-light-9: #66a3ff;
  --el-color-primary-light-10: #409eff;
  --el-color-primary-light-11: #1c6ee2;
  --el-color-primary-light-12: #0a58c9;
  --el-color-primary-light-13: #0a43aa;
  --el-color-primary-light-14: #0a2c6d;
  --el-color-primary-light-15: #00162b;
  --el-color-primary-dark-1: #5a8fff;
  --el-color-primary-dark-2: #66b1ff;
  --el-color-primary-dark-3: #8ccfff;
  --el-color-primary-dark-4: #ace0ff;
  --el-color-primary-dark-5: #c6ecff;
  --el-color-primary-dark-6: #d4f4ff;
  --el-color-primary-dark-7: #e6f7ff;
}

自定义组件样式

可以通过在组件上添加自定义的CSS类来修改组件的样式。

自定义按钮样式

<template>
  <el-button class="custom-button" type="primary">自定义按钮</el-button>
</template>

<style scoped>
.custom-button {
  background-color: #409eff;
  border-color: #409eff;
}
</style>

自定义表格样式

<template>
  <el-table :data="tableData" class="custom-table" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<style scoped>
.custom-table {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
</style>

使用主题色

ElementPlus提供了主题色功能，可以通过设置主题色来改变整个应用的配色方案。

使用主题色

<template>
  <el-button :class="`${colorType}-button`" type="primary">按钮</el-button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const colorType = ref('primary');

    return {
      colorType
    };
  }
});
</script>

<style scoped>
.primary-button {
  background-color: #409eff;
}
.success-button {
  background-color: #67c23a;
}
.info-button {
  background-color: #909399;
}
.warning-button {
  background-color: #e6a23c;
}
.danger-button {
  background-color: #f56c6c;
}
</style>

创建一个简单的登录页面

创建一个包含用户名和密码输入框以及登录按钮的登录页面。

登录页面代码

<template>
  <div class="login-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录页面</span>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const loginForm = ref({
      username: '',
      password: ''
    });

    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    });

    const submitForm = (formName) => {
      const formRef = ref(null);
      formRef.value.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('提交失败!');
          return false;
        }
      });
    };

    return {
      loginForm,
      rules,
      submitForm
    };
  }
});
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box-card {
  width: 480px;
}
</style>

构建一个数据展示页面

创建一个页面用于展示从API获取的数据，并使用表格组件进行展示。

数据展示页面代码

<template>
  <div class="data-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const tableData = ref([]);

    axios.get('https://api.example.com/data')
      .then((response) => {
        tableData.value = response.data;
      })
      .catch((error) => {
        console.error('获取数据失败：', error);
      });

    return {
      tableData
    };
  }
});
</script>

<style scoped>
.data-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

实现一个简单的表单应用

创建一个包含多个输入框和按钮的表单应用，用于收集用户信息。

表单应用代码

<template>
  <div class="form-container">
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const formData = ref({
      name: '',
      age: '',
      gender: ''
    });

    const rules = ref({
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
      ]
    });

    const submitForm = (formName) => {
      const formRef = ref(null);
      formRef.value.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('提交失败!');
          return false;
        }
      });
    };

    return {
      formData,
      rules,
      submitForm
    };
  }
});
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

常见错误及解决方法

1. 组件未按预期渲染

   • 检查是否正确引入了组件。
   • 确保组件的名称正确。
   • 确保组件已经注册并绑定到模板中。

2. 样式不生效

   • 确保引入了ElementPlus的样式文件。
   • 检查自定义样式是否覆盖了默认样式。

3. 组件功能不正常

   • 检查组件的使用方法是否正确。
   • 查看文档确认属性和事件的使用方式。
4. 组件未显示
   • 确保组件已经正确注册。
   • 检查是否有其他样式或布局问题导致组件被隐藏。

ElementPlus版本兼容性问题

ElementPlus有多个版本，确保使用的版本与项目需求相符。

• Vue 2 vs Vue 3

  • ElementPlus支持Vue 3，如果项目是基于Vue 3开发的，直接安装ElementPlus即可。
  • 如果是基于Vue 2开发的项目，建议使用Element UI而不是ElementPlus。
• 版本升级
  • 在更新ElementPlus版本时，注意查看更新日志，了解是否有不兼容的变更。
  • 可以使用npm的npm outdated命令查看项目中使用的ElementPlus版本是否是最新的。
  • 例如，可以访问ElementPlus的GitHub页面查看具体的版本更新日志：ElementPlus 更新日志

如何获取更多帮助与支持

• 官方文档

  • ElementPlus提供了详细的官方文档，涵盖了各个组件的使用方法和示例代码。
  • 官方文档位于：ElementPlus官网

• 社区支持

  • ElementPlus有一个活跃的社区，开发者可以在GitHub Issues、Stack Overflow等平台上提问和分享经验。
  • GitHub Issues页面：ElementPlus GitHub

• 线上教程与课程

  • 可以在慕课网等在线学习平台上找到相关的教程和课程，学习ElementPlus的使用方法。
  • 慕课网地址：慕课网
  • 例如，可以在慕课网上搜索“ElementPlus”找到相关的课程。
• 官方论坛
  • ElementPlus官方论坛是一个很好的交流平台，开发者可以在这里与其他开发者交流经验和解决遇到的问题。
  • 官方论坛地址：ElementPlus 论坛