What is element-plus?
Element Plus is a Vue 3 UI library that provides a wide range of customizable components for building modern web applications. It is designed to be easy to use and integrate, offering a consistent and polished look and feel.
What are element-plus's main functionalities?
Form Components
Element Plus provides a variety of form components such as input fields, buttons, and form containers. This example demonstrates a simple login form with username and password fields.
<template>
<el-form :model="form">
<el-form-item label="Username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
onSubmit() {
console.log('Form submitted:', this.form);
}
}
};
</script>
Data Display
Element Plus offers data display components like tables, which can be used to present data in a structured format. This example shows a simple table with columns for date, name, and address.
<template>
<el-table :data="tableData">
<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 Smith', address: 'No. 1, Lake Park' },
{ date: '2016-05-04', name: 'Jane Doe', address: 'No. 2, Lake Park' }
]
};
}
};
</script>
Navigation
Element Plus includes navigation components such as menus, which can be used to create navigational structures for your application. This example demonstrates a horizontal menu with three items.
<template>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Home</el-menu-item>
<el-menu-item index="2">About</el-menu-item>
<el-menu-item index="3">Contact</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log('Selected menu item:', key);
}
}
};
</script>
Other packages similar to element-plus
vuetify
Vuetify is a popular Vue.js UI library that follows the Material Design guidelines. It offers a wide range of components and is known for its comprehensive documentation and ease of use. Compared to Element Plus, Vuetify has a more modern design aesthetic and a larger community.
ant-design-vue
Ant Design Vue is a Vue.js implementation of the Ant Design system, which is widely used in enterprise applications. It provides a set of high-quality components and design guidelines. Compared to Element Plus, Ant Design Vue is more focused on enterprise-level applications and offers a more professional look and feel.
bootstrap-vue
Bootstrap Vue brings the power of Bootstrap to Vue.js. It provides a wide range of Bootstrap-styled components and utilities. Compared to Element Plus, Bootstrap Vue is more aligned with the Bootstrap framework and is ideal for developers who are already familiar with Bootstrap.
Element Plus - A Vue.js 3.0 UI library
- 💪 Vue 3.0 Composition API
- 🔥 Written in TypeScript
This project is still under heavy development. Feel free to join us and make your first pull request.
Join our Discord to start communicating with everybody
Bootstrap project
With command
$ yarn bootstrap
the project will install all dependencies and run lerna bootstrap
to initialize the project
Website preview
With command
$ yarn website-dev
the project will launch website for you to preview all existing component
You can also use this command to start a blank page to debug
$ yarn website-dev:play
//source file: ./website/play/index.vue
Component migration process
- Convert the item in https://github.com/element-plus/element-plus/projects/1 to an issue
- Assign yourself to the issue
- Author your component by generating new component command below
- Migrate tests and docs
- Open a new pull request, fill in the component issue link in 1
Generate new component
With command
$ yarn gen component-name
Note the component-name
must be in kebab-case
, combining words by replacing each space with a dash.
Commit template
With command
yarn cz
Example
[TYPE](SCOPE):DESCRIPTION#[ISSUE]
# example feat(button):add type 'button' for form usage #1234