1.Element ui
文档已经更新至Vue3，可以放心使用，在使用Element ui的时候注意在使用弹性布局的时候，Element ui中的Table 表格会出现缩放无法自适应问题。
安装
$ npm install element-plus --save
使用
// main.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.强制修改为自己需要的滚动条，在弹性布局的情况下
:deep(.el-table__inner-wrapper) {
overflow: auto !important;
max-height: 600px;
}
:deep(.el-table__header-wrapper) {
width: 100% !important;
overflow: visible !important;
}
:deep(.el-scrollbar) {
width: 100% !important;
overflow: visible !important;
}
:deep(.el-table__body-wrapper) {
width: 100% !important;
overflow: visible !important;
}
:deep(.el-scrollbar__wrap) {
width: 100% !important;
overflow: visible !important;
}
:deep(.el-table__body-wrapper .el-scrollbar .is-horizontal) {
display: none;
}
:deep(.el-table__body-wrapper .el-scrollbar .is-vertical) {
display: none;
}
2.修改布局格式
将原本的弹性布局，改为正常的布局格式，可以改为：
1.float+overflow:hidden
2.Grid布局
2.view-ui-plus
同样的已经适配Vue3，但是使用的时候有2个问题，第一个问题是：它的Menu 导航菜单是没有缩放功能的，你需要通过自己去处理Dropdown 下拉菜单用来处理缩放功能。第二个问题是：它的Page 分页的电梯功能，是需要输入后，然后敲击回车，才能执行，如果你需要电梯功能，需要去自己手动处理。
但是它会有给出一些比如：CountDown 倒计时、CountUp 数字动画、Numeral 数字格式化、NumberInfo 数据文本，这些基础的后台管理系统的基础功能。
安装
$ npm install view-ui-plus --save
使用
import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'const app = createApp(App)
app.use(store)
.use(router)
.use(ViewUIPlus)
.mount('#app')
如果遇到问题不知道该怎么处理，建议去借鉴官网Demo Admin Plus
3.Ant Design Vue
阿里的东西还是直接学习，毕竟厂子大。官网已经默认使用的是Vue3的文档
地址： Ant Design Vue
安装
$ npm install ant-design-vue --save
使用
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'ant-design-vue/dist/antd.css';
import antDesignVue from 'ant-design-vue';
createApp(App).use(store).use(router).use(antDesignVue).mount('#app');