为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Element-Plus快速入门指南

Element-Plus快速入门指南

标签：
前端工具 Vue.js
概述

Element-Plus 是一个基于 Vue 3 的组件库，继承了 Element UI 的设计理念和代码风格，提供了丰富的 UI 组件。本文将详细介绍 Element-Plus 的安装、引入和使用方法，并涵盖按钮、输入框、选择框等常用组件的使用教程。具体内容包括 Element-Plus 的简介与安装、常用组件使用教程、样式与主题定制、布局与栅格系统以及表单与验证。

Element-Plus简介与安装

Element-Plus 是一个基于 Vue 3 的桌面端组件库，它继承了 Element UI 的设计理念和代码风格，同时对原有的组件库进行了重构与优化，以适应更现代的开发环境。Element-Plus 提供了一套完整的 UI 组件，包括按钮、输入框、选择框、表单、布局等，可以帮助开发者快速搭建出美观且功能丰富的用户界面。

如何安装Element-Plus

要使用 Element-Plus，首先需要确保你的项目已经安装了 Vue 3。接下来，通过 npm 或 yarn 安装 Element-Plus。

使用 npm 安装：

npm install element-plus --save

使用 yarn 安装：

yarn add element-plus

如何在项目中引入Element-Plus

安装完成后，需要在项目的入口文件中引入 Element-Plus。在 Vue 3 项目中，通常会在 main.js 或 main.ts 文件中引入。

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

上述代码中，import 'element-plus/dist/index.css' 用于引入 Element-Plus 的默认样式，确保组件在页面中正常显示。

常用组件使用教程

Button按钮组件

Button 组件是 Element-Plus 中最基本的组件之一，用于创建按钮。Element-Plus 提供了多种按钮样式以满足不同的设计需求。

在项目中引入并使用 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>

<script>
import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';

export default defineComponent({
  components: {
    ElButton,
  },
});
</script>

在上述代码中，我们引入了 ElButton 组件，并通过 type 属性指定了按钮的样式。Element-Plus 支持以下几种按钮类型：

  • primary：主要按钮
  • success：成功按钮
  • info：信息按钮
  • warning：警告按钮
  • danger：危险按钮

Input输入框组件

Input 组件用于创建输入框，Element-Plus 提供了多种输入框样式，包括普通输入框、搜索输入框等。

在项目中引入并使用 Input 组件：

<template>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  <el-input v-model="searchValue" placeholder="搜索内容" suffix-icon="el-icon-search"></el-input>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElInput } from 'element-plus';

export default defineComponent({
  components: {
    ElInput,
  },
  setup() {
    const inputValue = ref('');
    const searchValue = ref('');

    return {
      inputValue,
      searchValue,
    };
  },
});
</script>

在上述代码中，我们使用了 v-model 指令来绑定输入框的值，并通过 placeholder 属性指定输入框的提示信息。suffix-icon 属性用于设置输入框后面的图标，这里使用了搜索图标。

Select选择框组件

Select 组件用于创建下拉选择框，Element-Plus 提供了多种选择框样式，包括单选、多选等。

在项目中引入并使用 Select 组件：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';

export default defineComponent({
  components: {
    ElSelect,
    ElOption,
  },
  setup() {
    const selectedValue = ref('');
    const options = ref([
      { value: 'option1', label: '选项1' },
      { value:.
option2', label: '选项2' },
      { value: 'option3', label: '选项3' },
    ]);

    return {
      selectedValue,
      options,
    };
  },
});
</script>

在上述代码中，我们通过 v-for 指令遍历选项数组，并使用 v-model 绑定选择框的值。ElOption 组件用于定义每个选项的属性。

样式与主题定制

如何更改组件样式

Element-Plus 提供了丰富的样式选项，可以自定义组件的样式。你可以通过修改 CSS 来调整组件的样式。

例如，修改 Button 组件的样式：

<style>
/* 修改 Button 组件的背景颜色 */
.el-button {
  background-color: #ff6600;
  border-color: #ff6600;
}

/* 修改 Button 组件的文本颜色 */
.el-button.is-plain {
  color: #ff6600;
}
</style>

在上述代码中，我们修改了 Button 组件的背景颜色和边框颜色。你也可以通过 class 或 style 属性来动态设置组件的样式。

如何更换主题颜色

Element-Plus 支持自定义主题颜色。你可以通过修改全局样式文件来更换主题颜色。

例如，更换主题颜色：

<style>
/* 定义一个新的主题颜色 */
@import '~element-plus/theme-chalk/index.css';

:root {
  --el-color-primary: #ff6600;
  --el-color-primary-light-7: #ff6600;
  --el-color-primary-light-6: #ff6600;
  --el-color-primary-light-5: #ff6600;
  --el-color-primary-light-4: #ff6600;
  --el-color-primary-light-3: #ff6600;
  --el-color-primary-light-2: #ff6600;
  --el-color-primary-light-1: #ff6600;
  --el-color-primary-dark-7: #ff6600;
  --el-color-primary-dark-6: #ff6600;
  --el-color-primary-dark-5: #ff6600;
  --el-color-primary-dark-4: #ff6600;
  --el-color-primary-dark-3: #ff6600;
  --el-color-primary-dark-2: #ff6600;
  --el-color-primary-dark-1: #ff6600;
}
</style>

在上述代码中，我们通过修改 :root 样式来定义新的主题颜色。你可以根据需要调整这些颜色变量。

布局与栅格系统

使用Element-Plus栅格系统创建布局

Element-Plus 提供了栅格系统用于创建响应式布局。栅格系统将页面分为多个列，每个组件可以根据需要占据相应的列数。

创建基本的栅格布局：

<template>
  <el-row>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
  </el-row>
</template>

<script>
import { defineComponent } from 'vue';
import { ElRow, ElCol } from 'element-plus';

export default defineComponent({
  components: {
    ElRow,
    ElCol,
  },
});
</script>

在上述代码中，我们使用了 el-row 和 el-col 组件来创建栅格布局。每个 el-col 组件通过 :span 属性指定占据的列数。

如何设置栅格列数与间隔

你可以通过栅格系统的属性来设置栅格的列数和间隔。

例如，设置栅格的间隔：

<template>
  <el-row :gutter="20">
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
  </el-row>
</template>

<script>
import { defineComponent } from 'vue';
import { ElRow, ElCol } from 'element-plus';

export default defineComponent({
  components: {
    ElRow,
    ElCol,
  },
});
</script>

在上述代码中，我们通过 :gutter 属性设置了栅格之间的间隔为 20px。

如何设置栅格列数

例如，设置栅格列数：

<template>
  <el-row>
    <el-col :span="12">12</el-col>
    <el-col :span="12">12</el-col>
  </el-row>
</template>

<script>
import { defineComponent } from 'vue';
import { ElRow, ElCol } from 'element-plus';

export default defineComponent({
  components: {
    ElRow,
    ElCol,
  },
});
</script>
``

在上述代码中，我们通过 `:span` 属性设置了每个 `el-col` 组件的列数为 12。

## 表单与验证

### 创建基本表单

Element-Plus 提供了表单组件，用于创建和处理表单数据。你可以通过这些组件来构建复杂的表单结构。

创建基本的表单：

```html
<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const form = reactive({
      name: '',
      email: '',
    });

    const submitForm = () => {
      console.log('提交表单:', form);
    };

    return {
      form,
      submitForm,
    };
  },
});
</script>

在上述代码中，我们使用了 el-form 组件来创建表单。每个表单项使用 el-form-item 组件，通过 label 属性指定表单项的标签，通过 el-input 组件创建输入框。

实现简单的表单验证

Element-Plus 提供了表单验证功能，可以对表单中的输入进行验证。

实现简单的表单验证：

<template>
  <el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';

export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const form = reactive({
      name: '',
      email: '',
    });

    const rules = reactive({
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
      ],
    });

    const formRef = ref(null);

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          ElMessage({
            message: '验证成功',
            type: 'success',
          });
        } else {
          ElMessage({
            message: '验证失败',
            type: 'error',
          });
        }
      });
    };

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

在上述代码中，我们通过 rules 属性定义了表单规则，并通过 ref 属性引用表单组件。在提交表单时，通过调用 validate 方法进行验证。

如何处理表单提交

当表单验证通过后，你可以处理表单提交逻辑。通常情况下，你可以通过自定义方法来处理表单数据。

处理表单提交：

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单数据
      console.log('提交表单:', form);
    } else {
      // 验证失败
      ElMessage({
        message: '验证失败',
        type: 'error',
      });
    }
  });
};

在上述代码中，我们通过 validate 方法验证表单数据，验证通过后打印表单数据，验证失败则显示错误消息。

常见问题解答

常见错误及解决方法

问题1：组件未正确引入

错误信息：

Module not found: Error: Can't resolve 'element-plus' in '.../src'

解决方法：

确保你已经正确安装了 Element-Plus，并在项目中正确引入了组件。

npm install element-plus --save
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

问题2：样式不生效

错误信息：

样式没有生效，页面显示不正常

解决方法：

确保你已经引入了 Element-Plus 的样式文件。

import 'element-plus/dist/index.css';

问题3：组件未正确注册

错误信息：

Component not found: el-button

解决方法：

确保你已经正确注册了组件，并在需要使用的组件中引入了相应的组件模块。

import { ElButton } from 'element-plus';

Element-Plus与Vue.js版本兼容性问题

Element-Plus 支持 Vue 3，但不支持 Vue 2。如果你使用的是 Vue 2 项目，你需要使用 Element UI，而不是 Element-Plus。

如果你需要从 Vue 2 迁移到 Vue 3，可以参考 Vue 官方文档进行迁移：

总结：

通过本文的介绍，你应该已经掌握了如何安装、引入、使用 Element-Plus 组件库，并能够创建和自定义组件、表单等。希望这些内容能够帮助你快速上手 Element-Plus，构建出美观且功能丰富的用户界面。如果你在使用过程中遇到任何问题，可以参考官方文档或在社区中寻求帮助。

点击查看更多内容
发表于 2024.12.20 01:55， 共 155 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕丝7291255

手记
篇
粉丝
15
获赞与收藏
70

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消