【vue2】ElementUI与VantUI组件库的使用详解(vue全家桶之一)

1d43f75f092a4050a8ce31e2d85f6868.gif

 🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:使用UI组件库是vue全家桶之一

目录

一、UI组件库介绍

二、ElementUI组件库(PC端常用)

2.1ElementUI介绍

2.2使用方法

三、VantUI组件库(移动端常用)

3.1VantUI介绍

3.2使用方法

期待大家的关注与支持! 你的肯定是我更新的最大动力——


一、UI组件库介绍

整合资源,提高团队的开发效率。说白了就是让前端工程师专注于写代码,将UI样式实现样式逻辑进行一个整合。比如拿轮播图举例子,我们如果用纯javaScript代码进行书写,可能需要一会儿的功夫,可能是实现了但是样式等还是比较刻板不够生动。可用了UI组件呢?也许只是10分钟就可以将这个轮播图的功能做出来且样式已经帮我们写好了,我们不需写额外的样式等只需要专注业务逻辑上的实现即可


二、ElementUI组件库(PC端常用)

2.1ElementUI介绍

ElementUI官方:首页 | Element

很清楚就把我们这个组件库的作用体现出来了:网站快速成型工具

官网介绍的四大使用特性:

一致性 Consistency

  • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
  • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
  • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程:设计简洁直观的操作流程;
  • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
  • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

  • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
  • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

2.2使用方法

因所涉及到的组件居多,但是安装注册的方法是一样的,使用就需要自己去翻阅组件里面的文档自己找~

 1.通过npm下载下我们的组件库

npm i element-ui -S

 2.按需引入/完整引入

大家请点开下面官方这个链接进行同步演示喔~

组件 | Element

完整引入比较省事因为不再需要用一个组件导入一个组件了。但是缺点也明显就是这样的话文件体积会变大。因此我们根据项目所需要的组件来判断,需要大量的组件我们就用完整引入,只需要一些组件即可我们推荐使用按需导入的方式来使用我们UI组件库

下面我将用官方的按需导入方式来实现我们的UI组件的使用

3.按需引入,安装安装 babel-plugin-component:

 4.修改.babelrc也就是修改babel.config.js

 5.便于我们封装便于管理,因此我们更推荐自己新建一个文件夹来统一管理我们的UI组件,通常为utils/element.js这个文件

演示组件名称:Button按钮

 我们将这个组件进行一个引入

 6.在main.js中接收导出的文件进行组件的注册

 7.去页面中写上组件进行测试

 当我们直接使用了没有注册会发生什么呢?

 会提示我们这个组件没有注册,那行我们去注册一下

8. 没注册的时候会提示我们进行注册组件,那么我们注册看下。完美了~

 以上便是我们ElementUI组件的注册导入方法,具体的组件使用则需要去看我们的组件库去看ElementUI的官方库再一一设置自己想要的结果


三、VantUI组件库(移动端常用)

3.1VantUI介绍

官方指南:Vant 2 - 轻量、可靠的移动端组件库

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本Vue 3 版本微信小程序版本,并由社区团队维护 React 版本支付宝小程序版本

特性:

  • 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)
  • 🚀 65+ 个高质量组件,覆盖移动端主流场景
  • 💪 使用 TypeScript 编写,提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%,提供稳定性保障
  • 📖 提供完善的中英文文档和组件示例
  • 📖 提供 Sketch 和 Axure 设计资源
  • 🍭 支持 Vue 2、Vue 3 和微信小程序
  • 🍭 支持主题定制,内置 700+ 个主题变量
  • 🍭 支持按需引入和 Tree Shaking
  • 🍭 支持服务器端渲染
  • 🌍 支持国际化和语言包定制

3.2使用方法

 同上述Element框架学习使用方法一样,我们还是看官方文档

快速上手指南:Vant 2 - 轻量、可靠的移动端组件库

1.下载vant

 2.按需引入组件

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

安装插件:

npm i babel-plugin-import -D

 3.这次我们引入刷新下拉的组件试试

 创建文件开始引入

 导入到main.js中

 页面上写下:

 

 4.效果查看:


至此我们的基本框架的安装导入使用已讲解完毕,愿你学的开心~

——期待大家的关注与支持! 你的肯定是我更新的最大动力——

评论 76
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初映CY的前说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值