前端(vue3-element-plus)

发布于:2025-02-10 ⋅ 阅读:(30) ⋅ 点赞:(0)

前端(vue3-element-plus)

# 使用 Vue 3 框架结合 Element Plus 组件库开发 Web 应用程序可以带来多方面的优势。Element Plus 是一个为 Vue 3 设计的桌面端组件库,它基于 Element UI 进行了全面的升级和优化,以充分利用 Vue 3 的新特性

#vue2 对应的是element-UI  
网址是:https://element.eleme.cn/#/zh-CN

文章目录

  • 前端(vue3-element-plus)
    • 1.Element Plus简介
      • 主要特点
    • 2.安装Element Plus
    • 3.Element Plus初步上手
      • 1.表单组件
      • 2.表格组件
      • 3.主应用组件

1.Element Plus简介

官网:https://element-plus.org/zh-CN/

# Element Plus 是一个基于 Vue 3 的高质量 UI 组件库,旨在帮助开发者快速构建现代化的 Web 应用程序。它由饿了么大前端团队开发并维护,最初源于饿了么内部的业务组件库,后发展成为广泛使用的开源项目。Element Plus 的设计原则强调易用性和灵活性,旨在为开发者提供一套开箱即用的组件,同时保持高度的可定制性。

主要特点

  • 丰富的组件库:Element Plus 包含了大量的预构建组件,如按钮、表格、表单、对话框、导航等,这些组件覆盖了构建复杂Web应用所需的基本功能。
  • 基于 Vue 3:利用 Vue 3 的新特性,如 Composition API,提高了代码的组织性和复用性,同时也带来了性能上的提升。
  • TypeScript 支持:整个库使用 TypeScript 编写,提供了完整的类型定义文件,有助于开发过程中减少错误,提高开发效率。
  • 主题定制:支持自定义主题,允许开发者根据项目需求调整组件的样式,包括颜色、字体等。
  • 国际化:内置了多语言支持,可以根据用户的语言设置自动切换语言环境。
  • 体积优化:通过按需加载等机制优化了组件库的体积,有助于提高应用的加载速度。
  • 图标支持:内置的图标库采用 Inline Vue SVG 组件的形式,避免了额外的网络请求,提高了加载速度,同时保证了图标的清晰度。
  • 社区与支持:拥有活跃的社区,开发者可以在社区中获得帮助、分享经验。Element Plus 也提供了详细的文档和示例,方便开发者快速上手。

2.安装Element Plus

#使用命令  npm install element-plus 

然后在项目中引入 Element Plus:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

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

可以参考我另一篇文章,初始化vue-boot项目 https://blog.csdn.net/shiyi52530403/article/details/142519755

3.Element Plus初步上手

1.表单组件

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

const form = ref({
  name: '',
  age: ''
})

const emit = defineEmits(['submit'])

const onSubmit = () => {
  emit('submit', form.value)
  form.value.name = ''
  form.value.age = ''
}
</script>

2.表格组件

<template>
  <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 label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

const tableData = ref([
  { name: '张三', age: '28' },
  { name: '李四', age: '22' }
])

const emit = defineEmits(['edit', 'delete'])

const handleEdit = (index, row) => {
  emit('edit', index, row)
}

const handleDelete = (index, row) => {
  emit('delete', index, row)
}
</script>

3.主应用组件

src/App.vue 文件中组合表单和表格组件:

<template>
  <div id="app">
    <h1>用户管理</h1>
    <FormComponent @submit="addUser" />
    <TableComponent :table-data="users" @edit="editUser" @delete="deleteUser" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FormComponent from './components/FormComponent.vue'
import TableComponent from './components/TableComponent.vue'

const users = ref([
  { name: '张三', age: '28' },
  { name: '李四', age: '22' }
])

const addUser = (user) => {
  users.value.push(user)
}

const editUser = (index, user) => {
  users.value[index] = user
}

const deleteUser = (index) => {
  users.value.splice(index, 1)
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

网站公告

今日签到

点亮在社区的每一天
去签到