ElementPlus

使用

  1. 依赖
npm install element-plus --save
  1. 在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')
  1. 在官网寻找组件运用

Screenshot 2025-11-23 032137.png

<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>

Screenshot 2025-11-23 032552.png

  1. 调整官方源码

Bye !

迷茫java练习生