Vue PC端框架

本文精选了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是基于VuejsBulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。
中文文档 | github地址

Vue-Blu

 

16. D2Admin

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

D2Admin

 

17. Best Resume Ever

Best Resume Ever 是一个帮助你快速生成漂亮简历的工具,它基于 VueLESS,生成的简历可导出为 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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

### 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、付费专栏及课程。

余额充值