前端(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>