【Vue UI组件库】

Vue UI组件库

  • 1 移动端常用UI组件库
  • 2 PC端常用UI组件库
    • 2.1 Element UI

1 移动端常用UI组件库

  • Vant:https://youzan.github.io/vant
  • Cube UI:https://didi.github.io/cube-ui
  • Mint UI:http://mint-ui.github.io

2 PC端常用UI组件库

  • Element UI:https://element.eleme.cn
  • IView UI:https://www.iviewui.com

2.1 Element UI

  • npm安装:npm i element-ui -S
  • 引入ElementUI:
    1> 完整引入:在 main.js 中写入以下内容
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    在这里插入图片描述
    2> 按需引入:借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
    ① 首先,安装 babel-plugin-component:npm install babel-plugin-component -D
    ② 然后,将 babel.config.js 文件修改为:
    在这里插入图片描述
    ③ 接下来,如果你只希望引入部分组件,比如 Button、Row、DatePicker,那么需要在 main.js 中写入以下内容:
    // 按需引入
    import { Button, Row, DatePicker } from 'element-ui';
    // 使用
    Vue.component(Button.name, Button);
    Vue.component(Row.name, Row);
    Vue.component(DatePicker.name, DatePicker);
    // 或写为
    Vue.use(Button)
    Vue.use(Row)
    Vue.use(DatePicker)
    ④ 报错Error: Cannot find module ‘babel-preset-es2015’
    在这里插入图片描述
    解决方法:把 babel.config.js 文件中的 es2015 改为 @babel/preset-env 即可。( 原因是旧版本的脚手架用的是 es2015,新版本不再适用,而官网没有及时更新。)
    在这里插入图片描述
  • 使用ElementUI:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/272024.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

带你学C语言~指针(3)

目录 ✍0.前言 🚀1.字符指针变量 🚅2.数组指针变量 🐱‍🏍2.1.数组指针变量是什么 🐱‍🏍2.2数组指针变量怎么初始化 🚢3.二维数组传参的本质 🚀4.函数指针变量 ✈4.1函数指…

Ubuntu-22.04编译安装FLTK

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、FLTK是什么?二、下载源代码三、准备编译环境四、编译五、运行测试程序六、Demo总结 前言 最近在研究FLTK,突然对它感了兴趣&#x…

猫粮选择困难?5款性价比高的主食冻干品牌推荐

近年来,冻干猫粮作为热门的高品质猫粮,受到了许多追求纯天然、健康食品的铲屎官的关注。萌新铲屎官就很疑惑了冻干猫粮可以代替猫粮作为主食吗?冻干猫粮真就那么好吗? 那么今天作为一个宠物店店长,跟大家一起聊聊各种…

UG模型的显示与隐藏

在UG中,除了通过图层的方式控制模型的显示与隐藏外,还可以直接通过显示与隐藏命令,位置在菜单-编辑-显示与隐藏,需要注意的是这些命令只能对可视图层中的模型进行控制 显示与隐藏:ctrl w 可以通过模型的类别&#xf…

系统架构设计师笔记

第1章计算机组成与体系结构 1.1.1计算机硬件的组成 (1)控制器。控制器是分析和执行指令的部件,也是统一指挥并控制计算机各部件协调工作的中心部件,所依据的是机器指令。控制器的组成包含如下。 ①程序计数器PC:存储下…

忻府区政协主席郭新和带队视察洁晋发电环保教育基地中国流动科技博物馆展厅

忻府区政协主席郭新和带队视察洁晋发电环保教育基地中国流动科技博物馆展厅 2023年12月5日,忻府区政协主席郭新和带队视察中国流动科技博物馆展览情况。 郭新和一行来到位于忻州市洁晋发电有限公司环保教育基地的中国流动科技馆忻府区展厅。展厅内配备了科普知识展…

2023 年备受瞩目的向量数据库赛道盘点出炉

近日,Zilliz 捷报频传,先后斩获来自极客公园、量子位、界面科技、OSCHINA 等行业头部媒体所颁发的奖项以及荣登相应榜单。 接下来,就让我们一起来了解一下这些颇受业界认可的奖项及榜单~ 2023 中国创新力量 50 榜单 【2023 中国创…

托盘在线缠绕机

托盘在线式缠绕机是适应流水线作业的包装机械,很适合现代化企业的自动化包装的需要,对提高包装效率,降低劳动强度,有效利用人力资源,起到较好的作用。目前,托盘在线缠绕机已经在化工、电子、食品、饮料、造…

小李的2023年度读书盘点

小李的2023年度读书盘点 主题读书 1、纪实文学 和去年一样,依然以上海译文出版社的“译文纪实”系列图书为主。该系列大部分图书质量说得过去,今年读的几本中,一本不及格(3/5星以下),《打工女孩》&#…

Facebook企业户与个人户的区别是什么?一文带你看懂Facebook企业户!

Facebook 作为最大的社交平台之一,吸引了大多数的卖家进行投放广告,并且投放广告的效果也是很不错的。Facebook个人账户大家都不陌生,那么 Facebook 有企业户吗?当然是有的,Facebook 有针对企业和品牌的专门广告账户&a…

10 种最佳排序算法原理及代码

什么是排序算法? 从本质上讲,排序算法是一种计算机程序,它将数据组织成特定的顺序,例如字母顺序或数字顺序,通常是升序或降序。 排序算法能干啥? 排序算法主要用于以有效的方式重新排列大量数据,以便更容易地进行搜…

围栏中心点

后端返回的数据格式是 [{height: 0,lat: 30.864277169098443,lng:114.35252972024682}{height: 1,lat: 30.864277169098443,lng:114.35252972024682}.........]我们要转换成 33.00494857612568,112.53886564762979;33.00307854503083,112.53728973842954;33.00170296814311,11…

MySQL日期查询 今天、明天、本月、下月、星期、本周第一天、本周最后一天、本周七天日期

文章目录 今天日期明天日期本月第一天本月最后一天下个月第一天当前月已过几天当前月天数当前月所有日期获取星期本周第一天本周最后一天获取本周的七天日期今天日期 select curdate()明天日期 select DATE_SUB(curdate(),INTERVAL -1 DAY) AS tomorrow本月第一天 select da…

阿春的450MT售价提前大曝光,符合你的预期吗?

最新消息,阿春的450MT在国外的官网上已经曝光,售价8990澳元,折合RMB 4.35万元,毕竟对他们来说这也是进口车嘛。那么从这个售价可以看出一些端倪,同平台的450SR海外售价8290澳元,450MT和450SR差价700澳元&am…

UI自动化测试的痛点

当我们找工作的时候查看招聘信息发现都需要有自动化测试经验,由此看来测试人员不会一点自动化测试技术都不好意思说自己是做软件测试的。大部分测试人员也都是从使用自动化测试工具、录制回放、测试脚本、开发小工具入门自动化测试的,然后在慢慢的接触 U…

idea设置自定义快捷键定义代码块

文章目录 idea设置自定义快捷键定义代码块1、首先打开setting然后找到editor中的live templates2、点击加号先新建一个Mygroup3、然后就可以按下图添加自己的group进行代码块快捷键的设置了 idea设置自定义快捷键定义代码块 1、首先打开setting然后找到editor中的live templat…

RK3568驱动指南|第八篇 设备树插件-第84章设备树插件参考资料介绍

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

基于合宙Air700E的4G环境监测节点(温湿度、气压等数据),通过MQTT上传阿里云物联网平台

基于合宙Air700E的4G环境监测节点(温度、湿度、气压等数据),通过MQTT上传阿里云物联网平台。 介绍 合宙Air700E 4G模块读取传感器(温湿度、气压等)数据并通过MQTT协议上传阿里云物联网平台,数据也会同时显…

最新9.9付费进群saas系统源码已修复定位及已知bug

距上版,优化一下功能,修复了已知问题及定位功能 1.九块九加群微信裂变人脉吃瓜宝妈同城相亲交友取图表情包 2.支持创建各种付费群,表情,吃瓜,创业,资源等等 3.支付对接第三方易支付,随便一家…

探索 WebRTC:数字世界的实时通信魔法

前言 在当今日常生活中,我们期望能够随时随地与朋友、同事或家人进行实时沟通。WebRTC(Web实时通信)技术就像一种魔法,让这些交流变得无比便捷,而且完全在浏览器中实现,无需下载任何额外应用或插件。 Web…