element-plus 官网
https://element-plus.org/zh-CN
安装
npm install element-plus --save
src\main.js
import { createApp } from 'vue'
import App from './App.vue'
//路由
import router from './router' //导入路由模块
//整体导入 ElementPlus 组件库
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 css 样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包
const app = createApp(App)
app.use(router) //将 Vue Router 插件注册到 Vue 应用中
//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus, { //将 ElementPlus 插件注册到 Vue 应用中
locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
})
app.mount('#app')
src\views\admin\login.vue
<script setup>
</script>
<template>
<h3>登录页</h3>
<el-icon><User /></el-icon>
<hr>
<el-button type="primary">登录</el-button>
</template>
<style scoped>
</style>