ElementPlus
- Overview 组件总览 | Element Plus
- 基于vue3 ,面向开发者的组件库
使用
- 依赖
npm install element-plus --save
- 在main.js / 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')
- 在官网寻找组件运用

<script setup>
</script>
<template>
<div class="button-row">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button> // 通过type定义颜色
<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>
</div>
<div class="button-row">
<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>
</div>
</template>
<style scoped>
.button-row {
margin-bottom: 10px;
}
</style>

- 调整官方源码
Bye !