Vue PC端框架

最新推荐文章于 2025-06-09 10:11:41 发布
最新推荐文章于 2025-06-09 10:11:41 发布
阅读量1.5k 收藏 5
点赞数
分类专栏： Vue2.0点滴知识
本文精选了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框架_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实现PC端录音功能
02-22
本文将深入探讨如何在Vue项目中实现PC端的录音与播放功能。 首先，我们需要理解浏览器的MediaRecorder API，这是JavaScript提供的一个内置功能，用于在用户许可下捕获音频和视频流。在Vue项目中，我们可以利用这个...
基于vue的ui框架
04-28
基于vue的ui框架。可适用于app,微信端，具有网页常见的布局和js兄啊过
基于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的基础上定制需要的样式。中文文档 在线预...
Vue3 PC端 UI组件库我更推荐Naive UI
最新发布
weixin_63443072的博客
06-09 1995
本文通过对Naive UI、Element Plus和Ant Design Vue三大主流Vue3 UI库的全面对比，揭示了Naive UI在多维度的卓越表现。从架构设计来看，Naive UI采用组合式开发理念，源码组织结构更合理，充分运用Vue3响应式特性；性能测试显示其在表格组件渲染、表单操作等场景下显著领先；开发体验方面，Naive UI提供近乎完美的TypeScript支持和高效的文档系统；独特的主题架构实现毫秒级切换。尽管社区规模稍逊，但其优异的性能、现代化架构和卓越的开发体验，使Naive UI
Vue PC端框架和Vue移动端UI框架
weixin_44771007的博客
09-12 532
在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。下面是我整理的 Vue PC端和移动端的UI框架，建议收藏，方便以后学习的时候拿出来查看。 Vue PC端框架 1. Element 中文文档：htt...
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实现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）...
Vue项目-前端框架
07-18
使用vue-cli搭建一个前端框架，要使用到node.js的相关知识，具体的操作步骤，可以参考我的博客
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框...
2023值得推荐的高颜值Vue3.0 Web PC端UI框架，赶紧收藏学习！
流绪@微梦
03-18 1万+
Hello，我是前端胡说，本期给大家带来2023值得推荐的Vue3.0 UI组件库，希望大家喜欢！Vue3 正式发布已经有一段时间了，2022年2月也正式变成 Vue 项目的默认版本。在过去一年多的时间里，各大组件库、框架也紧跟时代的步伐，纷纷对 Vue3 做了大量的支持和优化，从个人到公司企业也开始拥抱 Vue3.0。在这个过程中，也陆续涌现出很多优秀的开源组件库或框架，非常值得我们去学习和使用。
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
weixin_62364503的博客
09-29 3250
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue），Element ui table适应问题。
基于vue的UI框架
haoxinqing222的博客
09-06 887
1、饿了么 vue 2.0后台UI框架 https://github.com/ElemeFE/element 2、iview组件库 iView 主要服务于 PC 界面的中后台业务，很优秀的组件库，可惜不适合移动端 https://github.com/iview/iview https://iviewui.com/ 3、vux 基于Vue和WeUI的...
vue pc端UI库 移动端UI库
versious的博客
05-26 308
记录本人使用过或者同事使用过的库 PC： Element: ：https://element.eleme.cn/#/zh-CN/component/installation iView：https://iview.github.io/docs/guide/install（有小程序版本人未用过） Ant Design of Vue ： https://www.antdv.com/docs/vue/introduce-cn/ 移动端 vant:https://vant-contrib.gitee.io/vant
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、付费专栏及课程。

余额充值