Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）

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');