🥳博 主：初映CY的前说(前端领域)
🌞个人信条：想要变成得到，中间还有做到！
🤘本文核心：使用UI组件库是vue全家桶之一
目录
一、UI组件库介绍
整合资源，提高团队的开发效率。说白了就是让前端工程师专注于写代码，将UI样式实现样式逻辑进行一个整合。比如拿轮播图举例子，我们如果用纯javaScript代码进行书写，可能需要一会儿的功夫，可能是实现了但是样式等还是比较刻板不够生动。可用了UI组件呢？也许只是10分钟就可以将这个轮播图的功能做出来且样式已经帮我们写好了，我们不需写额外的样式等只需要专注业务逻辑上的实现即可
二、ElementUI组件库（PC端常用）
2.1ElementUI介绍
很清楚就把我们这个组件库的作用体现出来了：网站快速成型工具
官网介绍的四大使用特性：
一致性 Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
2.2使用方法
因所涉及到的组件居多，但是安装注册的方法是一样的，使用就需要自己去翻阅组件里面的文档自己找~
1.通过npm下载下我们的组件库
npm i element-ui -S2.按需引入/完整引入
大家请点开下面官方这个链接进行同步演示喔~
完整引入比较省事因为不再需要用一个组件导入一个组件了。但是缺点也明显就是这样的话文件体积会变大。因此我们根据项目所需要的组件来判断，需要大量的组件我们就用完整引入，只需要一些组件即可我们推荐使用按需导入的方式来使用我们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 是一个轻量、可靠的移动端组件库，于 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框架学习使用方法一样，我们还是看官方文档
1.下载vant
2.按需引入组件
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
安装插件：
npm i babel-plugin-import -D
3.这次我们引入刷新下拉的组件试试
创建文件开始引入
导入到main.js中
页面上写下：
4.效果查看：
至此我们的基本框架的安装导入使用已讲解完毕，愿你学的开心~
扫一扫
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
