Element-Plus入门指南：轻松构建美观的Vue组件-原创手记-慕课网

概述

Element-Plus 是一个基于 Vue 3 的桌面端组件库，旨在提供简洁且可复用的 UI 组件，以帮助开发者快速构建美观且交互良好的界面。Element-Plus 继承了 Element UI 组件库的设计理念，不仅保持了组件库的易用性和丰富性，还进行了现代化的升级，支持 Vue 3 的 Composition API，使得组件更加灵活和易用。

Element-Plus简介

什么是Element-Plus

Element-Plus 是一个基于 Vue 3 的桌面端组件库，旨在提供一套简洁、可复用的 UI 组件，以帮助开发者快速构建美观且交互良好的界面。Element-Plus 继承了 Element UI 组件库的设计理念，不仅保持了组件库的易用性和丰富性，还进行了现代化的升级，支持 Vue 3 的 Composition API，使得组件更加灵活和易用。

Element-Plus的特点和优势

Element-Plus 提供了以下核心特点和优势：

现代的 API 设计：Element-Plus 支持 Vue 3 的 Composition API，使得组件的开发和复用变得更加简单和高效。
丰富的组件库：Element-Plus 包含了大量的 UI 组件，涵盖了常见的表单组件、布局组件、导航组件等。
自定义能力强：通过简单的配置，开发者可以自定义主题颜色、字体样式等，以适应不同的项目需求。
一致性设计：Element-Plus 保持了一致的设计风格，使得不同组件之间的交互体验更加统一。
良好的文档：Element-Plus 提供了详细的官方文档和示例代码，帮助开发者快速上手和使用组件。

安装Element-Plus

Element-Plus 的安装非常简单，可以通过 npm 或 yarn 安装：

npm install element-plus --save
# 或者
yarn add element-plus

接下来，需要在项目中引入 Element-Plus 的样式文件。最简单的方法是在 main.js 或 main.ts 文件中导入样式：

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

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

完成以上步骤后，就可以在项目中使用 Element-Plus 的组件了。

快速上手Element-Plus

创建Vue项目

首先，需要创建一个新的 Vue 项目。可以通过 Vue CLI 创建项目：

npm init vue@latest
# 或者
yarn create vue@latest

按照提示进行项目的初始化，选择 Vue 3 和 TypeScript 等相关配置。

引入Element-Plus样式和组件

在项目中引入 Element-Plus 的样式文件和组件库：

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

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

使用基本组件

使用基本组件示例：

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

以上代码展示了如何使用一个基础按钮组件 ElButton。type 属性可以指定按钮的样式，常见的类型包括 primary、success、info、warning 和 danger。

样式定制

修改主题颜色

Element-Plus 提供了修改主题颜色的功能，可以通过配置 theme 和 dark 属性来实现：

import { createApp } from 'vue';
import App from './App.vue';
import 'element-plus/dist/index.css';
import { createApp, h } from 'vue';
import { ElButton } from 'element-plus';
import { createSSRApp } from 'vue';

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

const colors = ['#409EFF', '#67C23A', '#E6A23C', '#909399', '#E6A23C'];
const app = createSSRApp({
  render() {
    return h(ElButton, {
      type: 'primary',
      style: {
        '--el-color-primary': colors[0],
        '--el-color-primary-light-7': colors[0] + 'ee',
        '--el-color-primary-light-3': colors[0] + 'cc',
        '--el-color-primary-dark-3': colors[0] + '55',
        '--el-color-primary-dark-7': colors[0] + '1a',
      },
    }, 'Primary Button');
  },
});

上述代码中，通过设置 style 属性来修改按钮的颜色，并且可以调整不同档次的颜色。

自定义全局样式

自定义全局样式需要覆盖 Element-Plus 的默认样式。例如，可以覆盖按钮的背景颜色：

/* 在全局样式文件中 */
/* 覆盖按钮的背景颜色 */
.el-button {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}

重置Element-Plus样式

有时可能需要重置 Element-Plus 的全局样式，使其更加符合项目需求。可以使用 @import 导入样式文件并覆盖默认样式：

/* 在全局样式文件中 */
@import '~element-plus/lib/theme-chalk/index.css';

/* 重置表单样式 */
.el-form-item__label {
  font-size: 16px;
}

常用组件详解

按钮组件(Button)

按钮组件是最常用的组件之一，提供了多种样式和功能。

<template>
  <el-button type="primary">Primary Button</el-button>
  <el-button type="success" plain>Success Button</el-button>
  <el-button type="info" round>Info Button</el-button>
  <el-button type="warning" circle>Warning Button</el-button>
</template>

表格组件(Table)

表格组件用于展示和操作数据。以下是一个简单的表格示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'John Brown',
          address: 'New York No. 1 Lake Park',
        },
        {
          date: '2016-05-04',
          name: 'Jim Green',
          address: 'London No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

输入框组件(Input)

输入框组件用于用户输入。以下是一个简单的输入框示例：

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

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

路由与导航

使用Element-Plus导航组件

Element-Plus 提供了导航组件，如 ElMenu 和 ElMenuItem，可以方便地实现导航功能。

<template>
  <el-menu default-active="1" class="el-menu-vertical-demo">
    <el-menu-item index="1">
      <i class="el-icon-setting"></i>
      <span slot="title">Navigator One</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">Navigator Two</span>
    </el-menu-item>
  </el-menu>
</template>

实现简单的路由导航

结合 Vue Router 实现简单的路由导航：

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

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

在 router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在视图组件中使用导航链接：

<template>
  <el-menu default-active="1" class="el-menu-vertical-demo">
    <el-menu-item index="1" @click="goToHome">
      <i class="el-icon-setting"></i>
      <span slot="title">Home</span>
    </el-menu-item>
    <el-menu-item index="2" @click="goToAbout">
      <i class="el-icon-menu"></i>
      <span slot="title">About</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/');
    },
    goToAbout() {
      this.$router.push('/about');
    },
  },
};
</script>

实战案例

创建一个完整的表单界面

创建一个完整的表单界面，包括输入框、按钮和一些其他组件：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="输入框1">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="输入框2">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        address: '',
      },
    };
  },
  methods: {
    submitForm() {
      console.log(this.form);
    },
  },
};
</script>

整合Element-Plus组件完成交互界面

整合多个 Element-Plus 组件实现一个完整的交互界面，例如一个包含列表和分页的界面：


<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据获取
      this.tableData = [
        { id: 1, name: 'John', address: 'New York' },
        { id: 2, name: 'Jane', address: 'London' },
      ];
      this.total = this.tableData.length;
    },
  },
  created() {
    this.fetchData();
  },
};
</script>
``

以上代码展示了如何使用 Element-Plus 组件构建一个完整的交互界面，包括表格和分页功能。通过这种方式，可以快速构建出美观且交互良好的界面。