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
Status: Beta
This project is still under heavy development. Feel free to join us and make your first pull request.
Special thanks to the generous sponsorship by:
Documentation
You can find for more details, API, and other docs on https://element-plus.org
国内加速镜像站点
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