In this issue, we recommend Element Plus, a Vue 3-based desktop component library for developers, designers, and product managers.
Element Plus is a brand-new project based on Vue 3.0’s upgrade and adaptation of Element UI and refactored using TypeScript + Composition API. Officially, almost every line of Element UI code has been rewritten in a way that works best for Vue 3.0, also from the Ele.me team.
Compared with Element UI, Element Plus has the following improvements:
Developed using TypeScript, a complete type definition file is provided
Use the Vue 3.0 Composition API to reduce coupling and simplify logic
Refactor the mount class components with the new Vue 3.0 Teleport features
Use Lerna to maintain and manage projects
Use a lighter, more versatile time-date solution Day.js
Upgrade and adapt to core dependencies such as popperjs and async-validator
Complete support for 52 international languages
A new look
Optimized component APIs
More customization options
More detailed and friendly documentation
Install and use
Environmental support
Since Vue 3 no longer supports IE11, Element Plus no longer supports IE browsers
Use a package manager
It is recommended to install Element Plus using a package manager (NPM, Yarn, pnpm) and then you can use packaging tools such as Vite and webpack
# Choose a package manager you like
# NPM
$ npm install element-plus –save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
Directly in the browser
Import Element Plus directly from your browser’s HTML tags, and then you can use the global variable ElementPlus
Different CDN providers have different ingestion methods, and different CDN providers have different ingestion methods, we take unpkg and jsDelivr as examples here, and you can also use other CDN providers
unpkg
<head>
<!– Import Styles –>
<link rel=”stylesheet” href=”//unpkg.com/element-plus/dist/index.css” />
<!– Import Vue 3 –>
<script src=”//unpkg.com/vue@next”></script>
<!– Import Component Library –>
<script src=”//unpkg.com/element-plus”></script>
</head>
jsDelivr
<head>
<!– Import Styles –>
<link
rel=”stylesheet”
href=”//cdn.jsdelivr.net/npm/element-plus/dist/index.css”
/>
<!– Import Vue 3 –>
<script src=”//cdn.jsdelivr.net/npm/vue@next”></script>
<!– Import Component Library –>
<script src=”//cdn.jsdelivr.net/npm/element-plus”></script>
</head>
Full introduction
If you don’t care much about the size of the packaged file, it’s more convenient to use a full import
// main.ts
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import App from ‘./App.vue’
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)
Volar support
If you’re using Volar, specify the global component type via compilerOptions.type in tsconfig.json
// tsconfig.json
{
“compilerOptions”: {
// …
“types”: [“element-plus/global”]
}
}
Basic usage
Use type, plain, round, and circle to define the style of the button.
<template>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>
<el-row class="mb-4">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>
<el-row class="mb-4">
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</el-row>
<el-row>
<el-button :icon="Search" circle></el-button>
<el-button type="primary" :icon="Edit" circle></el-button>
<el-button type="success" :icon="Check" circle></el-button>
<el-button type="info" :icon="Message" circle></el-button>
<el-button type="warning" :icon="Star" circle></el-button>
<el-button type="danger" :icon="Delete" circle></el-button>
</el-row>
</template>
<script lang="ts" setup>
import {
Search,
Edit,
Check,
Message,
Star,
Delete,
} from '@element-plus/icons-vue'
</script>
<style>
:root {
--el-color-primary: #409eff;
--el-color-success: #67c23a;
--el-color-warning: #e6a23c;
--el-color-danger: #f56c6c;
--el-color-error: #f56c6c;
--el-color-info: #909399;
}
</style>Some components
Color
- Container
- Other components
Button | Element Plus
The project is based on the MIT open source license, and you can read more content by yourself.
