vue3 - elementPlus

官网： https://element-plus.org/zh-CN

安装

npm install element-plus --save

Element Plus 是项目运行时必须的 UI 组件库，最终会被打包到生产环境代码中，因此需要用 --save 安装（这也是 npm 5+ 版本的默认行为，可省略 --save）。

package.json

一、按钮 Button

全局导入

import { createApp } from 'vue'import ElementPlus from 'element-plus' //导入element-plus组件库import 'element-plus/dist/index.css' //导入element-plus CSS样式import App from './App.vue'const app = createApp(App)app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中app.mount('#app')

局部导入

<template><el-button type="success">局部导入的按钮</el-button>
</template><script setup>
// 1. 导入 Button 组件和样式（如果未全局引入样式）
import { ElButton } from 'element-plus'
// 若全局未引入 ElementPlus 样式，需单独导入
// import 'element-plus/es/components/button/style/css'
</script>

<template><h3>按钮</h3><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button><hr><h3>按钮属性</h3><el-button plain>朴素按钮</el-button><el-button round>圆角按钮</el-button><el-button circle>圆</el-button><el-button disabled>禁用按钮</el-button><el-button loading>加载中</el-button><hr><h3>尺寸</h3><el-button size="large">大型按钮</el-button><el-button>默认按钮</el-button><el-button size="small">小型按钮</el-button>
</template>

二、图标 Icon

全局注册

import { createApp } from 'vue'
// import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)// app.use(createPinia())
app.use(router)
app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中//注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.mount('#app')