本次项目采用的UI组件库为element-plus，请各位看官根据实际情况进行观看。

集成element-plus：

官网直达车：element-plus
官网明确指出如何引入使用。

安装element-plus：

选择一个你喜欢的包管理器：

npm install element-plus --save

yarn add element-plus

pnpm install element-plus

俺这个项目强制管理包为pnpm，所以我使用pnpm啦。

完整引入：

在main.ts中引入并挂载

import { createApp } from "vue";
// 引入Element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from "./App.vue";

createApp(App).use(ElementPlus).mount("#app");

页面使用：

ok页面可以显示，没有问题。

安装图标组件库：

按钮上面经常要用到图标，所以需要安装element-plus提供的图标组件库。

pnpm i @element-plus/icons-vue

导入使用：

国际化语言：

我们使用分页器功能

发现element-plus默认支持的是英语：

所以我们需要去进行国际化配置

在main.ts中进行配置：

import { createApp } from "vue";
// 引入Element-plus及其样式
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 配置element-plus国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from "./App.vue";

createApp(App).use(ElementPlus, {
    locale: zhCn,
}).mount("#app");

设置完之后我们发现页面变成中文了。