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

简介: ElementUI与VantUI组件库的使用详解

一、UI组件库介绍

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

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

2.1ElementUI介绍

ElementUI官方:首页 | Element

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

9504e16c167548b58a0c1b680290a5fa.png

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

一致性 Consistency

与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;

页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程:设计简洁直观的操作流程;

清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;

帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

2.2使用方法

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

c63101d5731f4b329fc280c368212f76.png

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

npm i element-ui -S

2.按需引入/完整引入

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

组件 | Element

3f8e0bbeebd94e74a0049aca326aaee2.png

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

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

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

5ee4f56f737e472e8d9507d367728d09.png

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

75dcf8119a084229a1a60384581a63ea.png

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

演示组件名称:Button按钮

ae6d4f4896f2458c968d94afae48d016.png

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

3a18e23e377144ecb90214ca0a15c6a1.png

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

53a32a12518e4f39a5b6f7068faa61ad.png

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

4a46d6cef2104e48958404fb631c522d.png

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

b36c6f4d785e4bb59a0b5607f206baf0.png

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

3e9afdf0b2b64ef5bfe45049b87973a0.png

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

41709172ae72401bb887d39e4bd1cf22.png

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

d1e8a9b96b1343a69102f4de777a7e9b.png

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

3.1VantUI介绍

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

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

a5889607a5094b5491fa6a2e962652f3.png

目前 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

ac1abc567eb1487b89d3a05874707386.png

2.按需引入组件

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

安装插件:

npm i babel-plugin-import -D

176b767627ea4dec82ea8206d640fc17.png

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

abde034370e54e1381048262aaf1da0c.png

创建文件开始引入

8af14267c12e490e99ff467057e60f4d.png

导入到main.js中

6ebc59c4b68a4662b4f7702237a480cc.png

页面上写下:

3c0e7865388d4633ba321fb3b7bb3dad.png

4.效果查看:

78de2a505a774695848cb1bd36d31d8a.gif


相关文章
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
571 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
111 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
246 1
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
770 4
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
548 77
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
375 17

热门文章

最新文章