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

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

基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...
为什么ui框架设计成单线程_评估UI设计的备忘单
为什么ui框架设计成单线程 Whether you're evaluating your design proposals or giving feedback to a colleague duri ...
Element UI, Ant Design Vue
1. 对比框架名称组件数量单元测试率 admin项目维护团队 GitHub Star数(2019/10/16) 原型设计素材 Element UI 46 81% vue-element-adm ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...

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