首页 前端知识 Vue3:基础项目UI框架PC端(Element ui,view-ui-plus,Ant Design Vue)

Vue3:基础项目UI框架PC端(Element ui,view-ui-plus,Ant Design Vue)

2024-05-25 09:05:11 前端知识 前端哥 972 932 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9449.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!