Vue 项目构建与开发入门：将 UI 界面交给第三方库

最新推荐文章于 2025-08-09 11:36:59 发布
最新推荐文章于 2025-08-09 11:36:59 发布
阅读量124 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 2025年全栈之道：前后端实战项目从入门到精通 文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52343631/article/details/131348280
本文介绍了如何在Vue项目中使用UI库Vux和图标库Iconfont，包括Vux的安装配置、使用方法，以及如何在项目中管理和使用Iconfont图标，助力快速开发和提升UI一致性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

UI 库

Vux 的安装和配置

Vux 的使用

其他 UI 库（框架）

图标库

使用 Iconfont 下载管理图标

Iconfont 的使用

其他图标库

结语

当你了解了 Vue 项目构建和开发的基本知识后，我认为接下来你一定想亲自在构建出的项目中填充自己的业务和功能逻辑，因为目前其还是空白的。

但是这里我不会教你如何实现一个具体的业务和功能模块，因为每个人想要实现的东西都可能不尽相同。如果你想快速开发一款应用，并且不想过多的操心页面 UI 层次的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon 图标，那么我想你有必要了解下 UI 库及图标库的应用。

UI 库

UI 库是脱离 JS 框架外的一种 “工具”，相比 JS 框架可以帮助你实现各种业务逻辑，其更关注于页面 UI 层面的实现，比如提供和业务无关的弹窗、导航、表单组件等，为项目 UI 层面的功能提供解决方案，比如 jQuery UI。

而由于本小册介绍的 JS 框架是 Vue，所以在 Vue 项目中我们需要使用基于 Vue 开发的 UI 库。本文将以比较流行的 Vux 为例，其目前 github star 数已在

了解本专栏 订阅专栏 解锁全文
Vue3框架下的顶尖UI组件库大盘点
Handsome_gir的博客
04-03 5536
推荐几款适合vue3框架的ui组件库，包括适用后台管理及移动端。
盘点12个Vue 3的高颜值UI组件库
Jack, what else can you do besides holding your little darling?
04-07 1万+
vue-devui 是基于 DevUI Design 的 Vue3 组件库，使用 pnpm + vite + vue3 + tsx 技术搭建，包含55个简洁、易用、灵活的组件，支持按需引入，支持主题定制，并内置 追光 / 蜜糖 / 紫罗兰 等 5 种漂亮的主题。今天给大家盘点12个Vue 3的高颜值UI组件库，凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库，用广东话讲：个个都靓。NutUI 3 京东风格的 Vue 移动端组件库，开发和服务于移动Web界面的企业级产品。
uni-app （vue）项目开发用得上的4 个第三方库
qq_36361094的博客
11-07 3624
uni-app （vue）项目开发用得上的4 个第三方库 模版下载
[收藏]VUE优秀UI组件库合集
热门推荐
qq_26780317的博客
06-14 5万+
[收藏]VUE优秀UI组件库合集(来源于https://shimo.im/doc/LkpdnWxM1j40BDJj/) 前言：vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考，期待开发者们推出更多优秀的组件库。 一、相关框架介绍                                         ---------...
mpvue项目中使用第三方UI组件库
weixin_39015132的博客
07-16 4万+
原文链接 最新声明 本文编写时间较早，随着时间的推移，mpvue及其周边生态越来越完善，文中的案例已经不适合在项目使用。希望大家参考其他更新的文章~ 简介 微信小程序上线已有一年多时间啦，自美团的mpvue(基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月。 前端技术日新月异，小程序的UI框架也层出不穷。 例如： WeUI: ...
Vue.js从入门到就业[第12讲]：Vue.js 与第三方库的集成
**My Coding Family**
01-27 1227
随着 Vue.js 生态系统的不断成熟，越来越多的第三方库为 Vue.js 提供了强大的支持。从 UI 组件库到表单验证，再到图表库，这些工具大大简化了开发复杂应用的过程。Vue.js 本身的功能非常强大，但集成了这些第三方库后，我们可以让应用更加丰富、互动性更强、用户体验更好。因此，学习如何将这些工具与 Vue.js 项目无缝集成，对于提升开发效率和增强应用功能至关重要。在本期专栏中，我们将详细探讨如何在 Vue.js 项目中集成这些流行的第三方库，帮助你提升应用功能和用户体验。
Vue.js从入门到就业[第10讲]：项目实战：如何开发一个电商平台？
**My Coding Family**
01-25 999
随着电子商务的迅猛发展，越来越多的开发者开始参与电商平台的开发。而电商平台的前端部分，尤其是前端框架和状态管理的应用，直接影响到用户体验和平台的可维护性。在本期专栏中，我们将以 Vue.js 为基础，带你一步步搭建一个简易的电商平台。我们将通过项目需求分析、多页面导航的实现、API 集成与数据交互、Vuex 的使用等内容，帮助你掌握构建电商平台的核心技能。构建电商平台不仅涉及用户界面（UI）的开发，还需要处理复杂的逻辑，如商品的展示、购物车的管理、订单结算等。
Vue 项目构建与开发入门.rar
06-18
开发拓展篇 2：将 UI 界面交给第三方库.md 开发拓展篇 3：尝试使用外部数据.md 开发指南篇 1：从编码技巧与规范开始.md 开发指南篇 2：学会编写可复用性模块.md 开发指南篇 3：合理划分容器组件与展示组件.md 开发...
Vue 项目构建与开发入门
05-03
“开发拓展篇 2：将 UI 界面交给第三方库.md”可能会讨论如何集成现有的UI组件库，如Element UI或Ant Design Vue，快速构建用户界面。 最后，“构建实战篇 3：多页路由与模板解析.md”继续深化对多页应用路由管理和...
Vue项目构建开发入门与实践指南
### Vue 项目构建与开发入门知识点详解 #### Vue CLI 3 项目构建基础 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了项目脚手架搭建、热重载、保存时 lint 检查、构建和打包等功能。Vue CLI 3 引入了...
Vue项目开发与配置教程：vuerepository
- 由于Vue的流行，还有许多第三方库和插件可以与Vue一起使用，如UI库Element UI、Vuetify等，进一步丰富了Vue的功能。 10. 升级和维护： - 随着技术的发展，Vue框架也会定期进行升级以引入新特性、修复已知问题。...
Vue：在项目中引入第三方UI组件库——饿了吗Element UI组件库和ATUI组件库
灿灿大王搭建的黄金屋
05-28 5280
1、引入Element组件库： 首先我们使用npm的方式安装：它能更好地和webpack打包工具配合使用。 npm i element-ui -S 然后我们在使用样式的页面引入样式和组件库即可： <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...
几款适合vue移动端的第三方小组件
scorpio的世界
08-10 9423
1、UI组件       各种弹窗或者滑动功能首推：Mint UI，简洁好用，其次可以选YDUI，均为vue单独适配      Mint UI地址：http://mint-ui.github.io/#!/zh-cn     YDUI地址：http://www.ydui.org/ 2、图像裁剪       功能强大的cropper肯定不用说了，也有为vue单独适配的版本vue-croppe
【qt5_study】1.Hello world
2301_79858368的博客
08-05 1039
本文介绍了Qt开发中项目创建和文件结构的基本知识。主要内容包括：1.项目模板选择，推荐使用Qt Widgets Application，基类通常选择QMainWindow或QWidget；2.项目文件结构，包含.pro项目管理文件、头文件、源文件和.ui界面文件；3.界面设计器使用，通过拖拽控件和设置属性来设计界面；4.项目构建运行流程，从main()函数入口到窗口显示的基本原理。文章特别强调了在嵌入式开发中通常使用QWidget作为基类，并详细说明了各文件的作用和相互关系，为Qt初学者提供了基础的项目开发
Android Studio切换到经典UI，老UI
weixin_42504805的博客
08-06 295
2、菜单File ->Settings ,在Setting界面将Enable New UI 的勾选去掉，点击OK，重启Android Studio，熟悉的界面就回来了.4.下载完成有个提示点击确认，会退出android studio，自己从新启动studio，经典UI就回来了。为什么要写这边文章，我自己的android studio年儿半载安装一次新的，所以记录一下。3、如果没有找到New UI，跟新版本idea一样，需要通过插件的方式还原到老版本界面。‌，点击下面的蓝色字体加载查询更多就能查到。
【无标题】
SH11HF的博客
08-07 876
Harbor是由VMware公司开源的企业级的Docker Registry管理项目，Harbor主要提供Dcoker Registry管理UI，提供的功能包括：基于角色访问的控制权限管理(RBAC)、AD/LDAP集成、日志审核、管理界面、自我注册、镜像复制和中文支持等。Harbor的目标是帮助用户迅速搭建一个企业级的Docker registry服务。它以Docker公司开源的registry为基础，额外提供了如下功能:基于角色的访问控制(Role Based Access Control)
【VS + Qt】VS2022 Qt 开发中 ui_xx.h 文件编辑报错但编译正常的问题解决
weixin_47564581的博客
08-06 324
摘要：VS2022 Qt开发中ui_xx.h文件出现编辑器报错但编译正常的问题，原因是IntelliSense未包含uic生成文件的路径。解决方法是在C++附加包含目录中添加$(QtVarsOutputDir)uic路径，或切换平台工具集至VS2022(143)。该问题源于IntelliSense与编译器头文件搜索路径不一致，Qt构建系统自动为编译器配置路径，但需要手动为IntelliSense添加uic生成目录才能正确识别ui_xx.h文件。（147字）
Unity职业路线和发展规划1：多人开发中的角色与分工概览
qq_46348216的博客
08-06 1026
摘要：Unity游戏开发团队分工与协作 在商业游戏开发中，团队协作比单人开发更高效，分工明确是项目成功的关键。Unity团队通常包括以下核心角色： 玩法程序员：负责游戏逻辑，如角色控制、战斗系统等，与策划、美术紧密合作。 UI程序员：实现用户界面，注重交互和体验，与设计师和玩法程序员协作。 技术美术（TA）：连接程序与美术，负责Shader、工具开发和性能优化。 客户端主程：主导技术选型、架构设计和核心框架搭建，需具备全局视野。 团队协作的关键在于职责划分，如UI程序员与玩法程序员通过事件解耦，确保高效并行
Baumer高防护相机如何通过YoloV8深度学习模型实现输电线路塔电缆检测分割（C#代码UI界面版）
最新发布
xianzuzhicai的博客
08-09 518
Baumer高防护相机如何通过YoloV8深度学习模型实现输电线路塔电缆检测分割（C#代码UI界面版）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YOLO实战营

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

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

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

打赏作者

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

抵扣说明：

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

余额充值