一、安装Element Plus
打开控制台,切换到自己的项目目录下,执行下面的命令:
$npm install element-plus
安装成功后,打开项目目录下的package.json ,看到dependencies中已经添加了element-plus,版本为2.8.1。
安装图标
$npm install @element-plus/icons-vue
二、使用Element Plus
1.引入 element-plus
修改main.js文件,引入element-plus,如下:
import {createApp }from ‘vue’
import ‘/@/style.css’
Import‘element-plus/dist/index.css’
import ElementPlus from ‘element-plus’
//引入ElementPlus图标库
import * as ElementPlusIconsVue from ‘@element-plus/icons-vue'
import App from '/@/App.vue'
import pinia from ‘/@/store'
import router from ‘/@/router'
const app =createApp(App)
//注册ElementPlus图标组件
for(const [key,component] of Object.entries(ElementPlusIconsVue)){
app.component(key,component)
}
app.use(pinia)
//挂载路由器
app.use(router)
//挂载ElementPlus组件库
app.use(ElementPlus)
app.mount(‘#app’)
2.使用 element-plus
将图标应用到组件上,修改app.vue
<template>
<div>
<h1>This is a Home Page.</h1>
<el-button type="primary">
<Edit style="width:1em;height:1em;margin-right:8px"/>Click On </el-button>
</div>
</template>
<script setup lang="ts">
import {Edit }from '@element-plus/icons-vue' </script> <style scoped> </style>
浏览器进入http://localhost:5173/,显示: