Vue PC端框架

最新推荐文章于 2025-06-09 10:11:41 发布
转载 最新推荐文章于 2025-06-09 10:11:41 发布 · 1.5k 阅读 · 5

本文精选了19款基于Vue框架的UI组件库，涵盖了从桌面端到移动端，从Material Design到Ant Design的各种风格，适合不同场景的前端开发需求。这些组件库不仅提供了丰富的UI元素，还支持SSR、PWA等现代Web技术，助力开发者高效构建美观、响应式的企业级应用。

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

1. Element

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
中文文档 | github地址

Element

 

2. iView

一套基于 Vue.js 的高质量UI 组件库
中文文档 | github地址

iView

 

3. vue-element-admin

vue-element-admin是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方案。它使用了最新的前端技术栈，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
中文文档 | github地址

vue-element-admin

 

4. Vue Material

通过Vue Material和Vue 2.0建立精美的app应用
中文文档 | github地址

Vue Material

 

5. VueStrap

基于 Vue.js 构建的 Bootstrap 组件。该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件，唯一需要依赖的是:

  • Vue.js (要求版本为 ^0.12，基于 0.12.10 版本做的测试)
  • Bootstrap CSS (需要版本为 3.x.x， 基于 3.3.5 版本做的测试)。 VueStrap 不依赖某个非常精确的 Bootstrap 版本。

在线文档 | github地址

VueStrap

 

6. Keen UI

由Vue编写的基本UI组件的轻量级集合，并受Material Design的启发。
在线文档 | github地址

Keen UI

 

7. Radon UI

一个帮助你快速开发产品的Vue组件库，简洁好用，效率高，让你摆脱各种定制化的烦恼。
中文文档 | github地址

Radon UI

 

8. N3-components

N3组件库是基于Vue.js构建的，让前端工程师和全栈工程师能快速构建页面和应用。致力于构建良好的Vue开发者生态圈，提供良好的开发体验。
在线文档 | github地址

N3-components

 

9. Muse-UI

基于 Vue 2.0 优雅的 Material Design UI 组件库
中文文档 | github地址

Muse-UI

 

10. Vue Antd

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
中文文档 | github地址

Vue Antd

 

11. Vuetify

Vuetify是一个渐进式的框架，试图推动前端开发发展到一个新的水平。Vuetify 支持SSR（服务端渲染），SPA（单页应用程序），PWA（渐进式Web应用程序）和标准HTML页面。
中文文档 | github地址

Vuetify

 

12. Buefy

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件。
在线文档 | github地址

Buefy

 

13. Vue Beauty

基于 ant design 的漂亮的 vue 组件库；vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库，旨在帮助开发者提升产品体验和开发效率、降低维护成本。
在线文档 | github地址

Vue Beauty

 

14. AT UI

AT UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。小编非常喜欢的UI风格。
中文文档 | github地址

AT UI

 

15. Vue-Blu

Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。
中文文档 | github地址

Vue-Blu

 

16. D2Admin

D2Admin是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。特别感谢 tanyf 的贡献。
中文文档 | github地址 | 预览地址

D2Admin

 

17. Best Resume Ever

Best Resume Ever 是一个帮助你快速生成漂亮简历的工具，它基于 Vue 和 LESS，生成的简历可导出为 PDF 格式。
中文文档 | github地址 | 预览地址

Best Resume Ever

 

18. Quasar

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。
中文文档 | github地址

Quasar

 

19. Vue Baidu Map

Vue Baidu Map是基于Vue 2.x的百度地图组件。
中文文档 | github地址 | 在线预览

Vue Baidu Map

 

 



作者：grain先森
链接：https://www.jianshu.com/p/c9a22c30cb2e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

基于Vue的移动端UI框架整理
天马3798
02-05 3209
特性：50+ 高质量组件、40+ 京东移动端项目正在使用、基于京东APP 7.0 视觉规范、支持按需加载、详尽的文档和示例、支持定制主题、支持多语言（国际化）、支持 TypeScript、支持服务端渲染（Vue SSR）、单元测试加持、配套有基于Webpack的构建工具，可快速创建已内置本组件库的 Vue 工程。特性：60+ 高质量组件、90% 单元测试覆盖率、完善的中英文文档和示例、支持按需引入、支持主题定制、支持国际化、支持 TS、支持 SSR。简介： 饿了么公司基于 vue 开发的 UI 组件库。
前端：2024年非常受欢迎非常火的 VueUI 库
一些平时在开发过程中遇到的常见问题，分享给大家
06-21 4400
前端：2024年非常受欢迎非常火的 VueUI 库
基于vue的ui框架
04-28
基于vue的ui框架。可适用于app,微信端，具有网页常见的布局和js兄啊过
Vue项目-前端框架
07-18
使用vue-cli搭建一个前端框架，要使用到node.js的相关知识，具体的操作步骤，可以参考我的博客
Vue3 PC端 UI组件库我更推荐Naive UI
最新发布
weixin_63443072的博客
06-09 1997
本文通过对Naive UI、Element Plus和Ant Design Vue三大主流Vue3 UI库的全面对比，揭示了Naive UI在多维度的卓越表现。从架构设计来看，Naive UI采用组合式开发理念，源码组织结构更合理，充分运用Vue3响应式特性；性能测试显示其在表格组件渲染、表单操作等场景下显著领先；开发体验方面，Naive UI提供近乎完美的TypeScript支持和高效的文档系统；独特的主题架构实现毫秒级切换。尽管社区规模稍逊，但其优异的性能、现代化架构和卓越的开发体验，使Naive UI
Vue Element UI 完整版前端框架
07-31
Element UI 完整版 源码 可用 vue+Element-UI 前端框架
Vue实现PC端录音功能
02-22
本文将深入探讨如何在Vue项目中实现PC端的录音与播放功能。 首先，我们需要理解浏览器的MediaRecorder API，这是JavaScript提供的一个内置功能，用于在用户许可下捕获音频和视频流。在Vue项目中，我们可以利用这个...
vue实现PC端分辨率适配操作
10-15
本篇文章将详细介绍如何在Vue项目中实现PC端分辨率适配。 首先，适配的关键在于将设计稿上的像素值转换为相对单位，比如rem，以便根据屏幕大小动态调整元素尺寸。在这里，我们采用阿里团队提出的可伸缩布局方案——...
Vue实现PC端靠边悬浮球的代码
10-15
通过上述知识点的介绍，我们可以了解到Vue框架在实现PC端悬浮球功能时的应用。不仅包括了对基础Vue语法的理解，如数据绑定、事件处理、条件渲染等，还包括了CSS动画和定位的使用。通过结合这些知识点，我们能够创建...
一个基于vue的pc端综合性网上购物商城
08-12
Vue.js作为一款轻量级且功能强大的渐进式JavaScript框架，被广泛应用于构建用户界面，尤其在开发复杂的PC端电子商务平台时表现出色。本项目就是一个实例——“基于Vue的PC端综合性网上购物商城”，它涵盖了前端展示...
vue项目PC端适配不同分辨率屏幕
03-06
以下是一些关于如何实现“Vue项目PC端适配不同分辨率屏幕”的详细知识点： 1. **响应式设计基础**：响应式设计是确保网站在不同设备上都能正常显示的关键。通过媒体查询（Media Queries）和流式布局（Fluid Grids）...
基于vue3+ts+electron搭建桌面端开发框架
rcoon
02-23 3495
文章目录创建vue项目选择手动配置配置vue版本选择class样式配置typescript配置路由配置css预编译配置语法检测工具选择何时检测选择如何存放配置当前的配置是否保存集成electron安装electron-builder修改background.ts安装typescript和ts-loader 之前一直使用qt做桌面版工具开发，但是界面美化一直是个麻烦的事情，想像前端那样有各种各样的框架可以使用，而electron插件在我的认知里是最好的选择，参考网上别人的教程，和ts一起配置时总会有各种坑，现
Vue在桌面应用开发中的应用
weixin_41978174的博客
07-22 2282
Vue.js 在桌面应用开发中的应用主要通过与 Electron 框架结合来实现。Electron 是一个用于构建跨平台桌面应用的框架，它允许开发者使用 web 技术（HTML、CSS、JavaScript）来构建桌面应用。通过将 Vue.js 和 Electron 结合使用，开发者可以利用 Vue 的灵活性和 Electron 的桌面应用能力，创建高效、功能丰富的跨平台桌面应用。：创建 Electron 的主进程文件（如。
基于vue的UI框架集锦(移动端+pc端)
热门推荐
赵乘风_i
04-26 7万+
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k中文文档 在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。中文文档 在线预...
Vue PC端框架和Vue移动端UI框架
weixin_44771007的博客
09-12 532
在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。下面是我整理的 Vue PC端和移动端的UI框架，建议收藏，方便以后学习的时候拿出来查看。 Vue PC端框架 1. Element 中文文档：htt...
vue ui框架_13个超实用的Vue PC端框架
weixin_39623244的博客
11-25 3495
今天给大家推荐13个超实用的Vue PC端框架，希望能够对大家有所帮助1. ElementElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库2. iView一套基于 Vue.js 的高质量UI 组件库3. vue-element-adminvue-element-admin是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方...
vue UI框架
weixin_34248487的博客
03-07 201
1）vue 只是一个js库，不算框架，他不限制你使用使用UI框架，理论上你可以使用任意 UI 框架   2）一些 vue UI框架 vux：https://vux.li/#/ mint：http://mint-ui.github.io/#!/zh-cn vue-carbon：https://myronliu347.github.io/vue-carbon/#!/ vue-mobile：https:...
Vue进阶（贰佰）：前端UI框架介绍
IT全栈 华强工作室
12-04 9068
目前流行前端几大UI框架 2019-01-28阅读 8100 在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。 一. ElementUI Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，示例丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。 官网地址 Github 二.iView UI iview ui是一个强大的基于vue的ui
vue搭配的UI框架 移动端 + pc端
weixin_30790841的博客
09-06 206
PC桌面端UI框架： 1，iview （最新，用户评分高功能多炫酷 解决和避免了其他UI框架出现的一些小问题） 2, bootstrap （使用用户最多样式死板没特色） 3，ElementUI （饿了么团队研发，使用较多不过里还有些小bug） 以上详情自己斟酌比较参考。 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 手机端UI框...
vue3 vite pc端框架搭建
03-15
### Vue3 和 Vite 搭建 PC 端应用框架教程 以下是关于如何使用 Vue3 和 Vite 构建一个完整的 PC 端项目的详细说明： #### 一、初始化项目 为了快速搭建 Vue3 的开发环境，可以借助 `pnpm` 或者其他包管理器来完成。推荐使用 `pnpm` 工具，因为它在性能和磁盘空间利用率上表现更优[^2]。 1. **安装 pnpm** 如果尚未安装 `pnpm`，可以通过以下命令全局安装它： ```bash npm install -g pnpm ``` 2. **创建 Vue3 项目** 使用官方脚手架工具创建一个新的 Vue3 项目： ```bash pnpm create vite my-vue-app --template vue cd my-vue-app ``` #### 二、配置环境变量 通过设置 `.env.*` 文件实现不同环境下（如开发模式与生产模式）的差异化配置。 1. 在根目录下新增两个文件用于区分环境： - `.env.development`: 开发环境专用。 ```plaintext VITE_APP_ENV=development VITE_API_BASE_URL=http://localhost:8080/api/ ``` - `.env.production`: 生产环境专用。 ```plaintext VITE_APP_ENV=production VITE_API_BASE_URL=https://api.example.com/ ``` 2. 修改 `package.json` 中的脚本部分以便支持不同的启动方式： ```json { "scripts": { "dev": "vite", "build": "vite build" } } ``` #### 三、集成 Pinia 和 Axios Pinia 是 Vue 官方推出的轻量级状态管理库；Axios 则是一个流行的 HTTP 请求客户端。 1. 添加必要的依赖项到项目中： ```bash pnpm add pinia axios sass ``` 2. 创建基础的状态存储逻辑于 `/src/stores/counter.js` 下面作为例子展示如何操作数据： ```javascript import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` 3. 配置 Axios 实例并将其挂载至全局对象方便组件调用： ```javascript // src/plugins/axios.js import axios from 'axios'; const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 动态获取 API 地址 timeout: 5000, }); export default service; ``` #### 四、调整公共钩子函数 如果存在自定义通用方法，则需同步更新这些辅助功能模块以适配新架构需求。 假设有一个名为 `useCommon.js` 的公用 Hook 存在于 hooks 路径里，那么应该按照当前业务场景重构其内部实现细节[^1]。 #### 五、测试页面加载效果 最后一步是对首页模板稍作改动验证整个流程是否顺畅无误。 编辑位于 `views/Home.vue` 组件内的代码片段如下所示： ```html <template> <div class="home"> Current Env Config: {{ envConfig }} </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; const envConfig = ref(''); onMounted(() => { envConfig.value = `${process.env.VUE_APP_ENV} | ${import.meta.env.VITE_API_BASE_URL}`; }); </script> ``` 至此完成了基于 Vue3 + Ant Design Vue + Vite 技术栈的基础工程设立过程。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值