个人技术总结——基于Vue 3的UI 组件库Element Plus

[222200111李敬毅]

这个作业属于哪个课程	https://bbs.csdn.net/forums/2401_CS_SE_FZU
这个作业要求在哪里	https://bbs.csdn.net/topics/619470310
这个作业的目标	个人技术总结
其他参考文献	《构建之法 现代软件工程》

目录

• 1、技术概述
• 2、技术详述
• 2.1 安装和配置 Element Plus
• 2.2 引入Element Plus
• 2.3 Element Plus 组件介绍
• 2.3.1 按钮（Button）组件
• 2.3.2 输入框（Input）组件
• 2.3.3 表格（Table）组件
• 2.3.4 对话框（Dialog）组件
• 2.4 自定义主题和样式
• 3、遇到的问题和解决方案
• 3.1 问题 1：使用 Element Plus 时样式冲突
• 3.2 问题 2：Dialog 弹窗关闭时，页面滚动无法恢复
• 3.3 问题 3：Element Plus 与 Vue Router 结合使用时，动态加载组件的样式不生效
• 4、总结
• 5、参考文献与博客

1、技术概述

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，特别适用于单页面应用（SPA）。它通过响应式数据绑定和组件化开发简化了前端开发过程，适合开发动态交互式网站。
Element Plus 是一个基于 Vue 3 的 UI 组件库，提供了一整套高质量的组件，旨在帮助开发者快速构建现代化的 Web 应用界面。它继承了 Element UI 的设计理念，但经过了 Vue 3 的优化，提供了更好的性能和支持。

• 学习原因：学习 Vue.js 有助于提升前端开发效率，尤其在构建复杂的用户界面时，而学习和使用 Element Plus 能够帮助开发者快速实现界面布局和交互，专注于业务逻辑的实现
• 学习难点：难点主要在于样式的定制、与其他库的兼容性以及如何在大型项目中灵活配置和优化性能。

  2、技术详述

  2.1 安装和配置 Element Plus

  在 Vue 3 项目中使用 Element Plus，首先需要进行安装：

npm install element-plus

2.2 引入Element Plus

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');

这样，Element Plus 的所有组件就可以在 Vue 项目中全局使用了。

2.3 Element Plus 组件介绍

Element Plus 提供了大量的 UI 组件，如按钮、输入框、表格、对话框等。下面介绍几个常用组件的使用方法。

2.3.1 按钮（Button）组件

<template>
  <el-button type="primary" @click="handleClick">Primary Button</el-button>
  <el-button type="success" @click="handleClick">Success Button</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$message.success('Button clicked!');
    }
  }
};
</script>

el-button组件用于创建按钮，通过 type 属性设置按钮的样式（如 primary, success, warning 等）。
@click 事件绑定了点击按钮后的事件处理函数。

2.3.2 输入框（Input）组件

<template>
  <el-input v-model="inputValue" placeholder="Enter something"></el-input>
</template>

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

el-input 组件用于创建输入框，通过 v-model 双向绑定输入框的值.可以通过 placeholder 属性设置输入框的提示文字.

2.3.3 表格（Table）组件

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="Age" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 28, address: 'New York' },
        { name: 'Jane', age: 22, address: 'London' },
        { name: 'Bob', age: 30, address: 'Berlin' }
      ]
    };
  }
};
</script>

el-table 组件用于创建表格，el-table-column 用于定义表格的列.:data 属性绑定数据，prop 属性指定列显示的数据字段。

2.3.4 对话框（Dialog）组件

<template>
  <el-button type="primary" @click="dialogVisible = true">Open Dialog</el-button>

  <el-dialog
    title="Dialog"
    :visible.sync="dialogVisible"
    @close="handleClose">
    <p>This is a dialog example.</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose() {
      this.$message.info('Dialog closed');
    }
  }
};
</script>

el-dialog组件用于显示弹出框，通过 :visible.sync 实现与 Vue 数据的双向绑定，控制对话框的显示与隐藏。点击按钮时，dialogVisible 会变为 true，从而显示对话框。

2.4 自定义主题和样式

Element Plus 提供了主题定制功能，可以通过修改样式变量来调整组件的外观，满足项目的设计要求。
修改主题样式:

1. 在 vite.config.js 中配置样式的覆盖：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
});

2. 创建一个 variables.scss 文件并定义覆盖的 Element Plus 变量，例如：

// variables.scss
$--font-size-base: 16px;
$--button-primary-background-color: #42b983;

通过这种方式，可以灵活调整 Element Plus 组件库的默认样式。

3、遇到的问题和解决方案

3.1 问题 1：使用 Element Plus 时样式冲突

在 Vue 项目中使用 Element Plus 时，可能会遇到与自定义样式或其他 UI 库的样式冲突，尤其是全局样式覆盖的问题。

• 解决方案： 可以通过调整 CSS 优先级，或者将 Element Plus 的样式与自定义样式分开管理。通过 scoped 样式避免全局样式的干扰，或者使用 CSS 模块化技术。

<style scoped>
/* 仅作用于当前组件 */
.el-button {
  background-color: #42b983 !important;
}
</style>

3.2 问题 2：Dialog 弹窗关闭时，页面滚动无法恢复

在某些情况下，打开 el-dialog 时，页面滚动会被锁定，但是关闭弹窗后，页面滚动并没有恢复。

• 解决方案： Element Plus 会默认阻止滚动，关闭弹窗时，需要手动恢复页面滚动。可以通过在 @close 事件中添加恢复滚动的逻辑：

<template>
  <el-dialog
    title="Dialog"
    :visible.sync="dialogVisible"
    @close="handleClose"
  >
    <p>This is a dialog example.</p>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);

const handleClose = () => {
  document.body.style.overflow = '';  // 恢复页面滚动
};
</script>

3.3 问题 3：Element Plus 与 Vue Router 结合使用时，动态加载组件的样式不生效

在使用 Vue Router 动态加载组件时，Element Plus 的样式可能不会立即加载，导致组件渲染时没有样式。

• 解决方案： 确保你使用了异步组件加载的方式时，已经在 vite.config.js 或 webpack.config.js 中正确处理了样式的加载。

// 异步组件加载
const UserList = () => import('@/components/UserList.vue');

// 在 App.vue 或 Router 文件中注册
const routes = [
  {
    path: '/user-list',
    component: UserList
  }
];

这样可以确保组件的样式在页面加载时被正确引入。

4、总结

Vue.js 的 Element Plus 是基于 Vue 3 的 UI 组件库，提供了一整套高质量、易用的前端组件，可以帮助开发者快速构建现代化的 Web 应用，支持自定义主题、组件配置和国际化，常用于提升开发效率和用户体验。而在我的软件工程实践过程中，我也学习并运用了这个技术，帮助了我更好的理解前端技术，同时有助于我写出更美观简介的网页前端。

5、参考文献与博客

《Element Plus 官方文档》，Element Plus 团队