GitHub当前排名前十的热门Vue项目 ​​

简介: GitHub当前排名前十的热门Vue项目 ​​

Vue.js

1. ElemeFE/element

tag:vue javascript components

star:15.8k

link:https://github.com/ElemeFE/element

简介

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地创建布局。

官网地址:http://element.eleme.io/

2. bailicangdu/vue2-elm

tag:vue

star:10.4k

link:https://github.com/bailicangdu/vue2-elm

简介

初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登录、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助。

此项目大大小小共 45 个页面,涉及注册、登录、商品展示、购物车、下单等等,是一个完整的流程。因为利用业余时间来做,年前就开始写,又跨个年,周期有点长,项目从零布局到完成共用了2个多月的时间,目前项目已经完成,正在进行一些性能的优化,增加详细的注释。

技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

目标功能

定位功能 -- 完成

选择城市 -- 完成

搜索地址 -- 完成

展示所选地址附近商家列表 -- 完成

搜索美食,餐馆 -- 完成

根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成

餐馆食品列表页 -- 完成

购物车功能 -- 完成

店铺评价页面 -- 完成

单个食品详情页面 -- 完成

商家详情页 -- 完成

登录、注册 -- 完成

修改密码 -- 完成

个人中心 -- 完成

发送短信、语音验证 -- 完成

下单功能 -- 完成  

订单列表 -- 完成

订单详情 -- 完成

下载App -- 完成

添加、删除、修改收货地址 -- 完成

帐户信息 -- 完成

服务中心 -- 完成

红包 -- 完成

上传头像 -- 完成

 

3. airyland/vux

tag:vux weui vue vue-components

star:8.9k

link:https://github.com/airyland/vux

简介

Vux(读音 [v'ju:z],同views)是基于 WeUI 和 Vue(2.x) 开发的移动端 UI 组件库,主要服务于微信页面。

基于 webpack+vue-loader+vux 可以快速开发移动端页面,配合 vux-loader 方便你在 WeUI 的基础上定制需要的样式。

vux-loader 保证了组件按需使用,因此不用担心最终打包了整个 vux 的组件库代码。

vux 并不完全依赖于 WeUI,但是尽量保持整体UI样式接近 WeUI 的设计规范。最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状态还有不少距离,因此需要大家及时反馈问题及贡献代码。

即使你不使用 vux 的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。

官网:https://vux.li/

 

4. iview/iview

tag:vue javascript components ui-design vue-componentsui-kit

star:8.3k

link:https://github.com/iview/iview

简介

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

特性:

高质量、功能丰富

友好的 API ,自由灵活地使用空间

细致、漂亮的 UI

事无巨细的文档

可自定义主题

官网:https://www.iviewui.com/

5. ElemeFE/mint-ui

tag:vue mobile component vue-componentsui-kit

star:7.2k

link:https://github.com/ElemeFE/mint-ui

简介

基于 Vue.js 的移动端组件库。

特性:

Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

官网:http://mint-ui.github.io/#!/en

6. vue-bulma/vue-admin

star:5.5k

link:https://github.com/vue-bulma/vue-admin

简介

一个基于 Vue 2.0 和 Bulma 0.3 的 后台管理框架。

特性:

基于 Vue 2.0 和 Bulma 0.3 技术

响应式和弹性布局

多种图表类型

丰富的组件或参见 vue-bulma

基于优秀的第三方库

官网:https://admin.vuebulma.com

7. museui/muse-ui

tag:muse-ui material vue vuejs2 vue2

star:4.3k

link:https://github.com/museui/muse-ui

简介

基于 Vue 2.0 和 Material Design 的 UI 组件库。

特性:

多功能组件,使用无忧

自定义主题文件,更易扩展

基于 Vue 2.0,开发更加快速

官网:https://museui.github.io

8.vuematerial/vue-material

tag:vue-material javascript vue material material-design

star:3.9k

link:https://github.com/vuematerial/vue-material

简介

Vue Material is lightweight framework built exactly according to the Material Design specs.

It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.

Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.

官网:https://vuematerial.github.io

9. PanJiaChen/vue-element-admin

tag:vue-admin vue admin element vuex  

star:3.6k

link:https://github.com/PanJiaChen/vue-element-admin

简介

这半年来一直在用 vue 写管理后台,目前后台已经有百来个个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用 vue + element + axios 由 webpack2 打包.由于是个人项目,所以数据请求都是用了 mockjs 模拟。注意:在次项目基础上改造开发时请移除mock文件。 写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:

手摸手,带你用 vue 撸后台 系列一(基础篇)

手摸手,带你用 vue 撸后台 系列二(登录权限篇)

手摸手,带你用 vue 撸后台 系列三 (实战篇)

手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)

手摸手,带你封装一个 vue component

功能

登录/注销

权限验证

侧边栏

面包屑

富文本编辑器

Markdown编辑器

JSON编辑器

列表拖拽

plitPane

Dropzone

Sticky

CountTo

echarts图表

401,404错误页面

错误日志

导出excel

table example

动态table example

拖拽table example

内联编辑table example

form example

多环境发布

dashboard

二次登录

动态侧边栏(支持多级路由)

mock数据

cache tabs example

screenfull

markdown2html

views-tab

10.ghosh/uiGradients

tag:css design vue gradients

star:3k

link:https://github.com/ghosh/uiGradients

简介

This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

官网:http://uigradients.com/

目录
相关文章
|
4天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
5天前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
13 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
5天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
38 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
1天前
|
存储 前端开发 数据可视化
一文教会你 如何在Github中创建仓库?如何将多个项目放到一个仓库中管理?如何将本地项目上传到GitHub中?
这篇文章详细介绍了如何在GitHub上创建新仓库,以及如何将多个项目整合到一个仓库中进行管理。文章还提供了克隆仓库到本地、使用不同文件夹存放不同项目代码、以及将这些项目提交到远程服务器的步骤和方法。
一文教会你 如何在Github中创建仓库?如何将多个项目放到一个仓库中管理?如何将本地项目上传到GitHub中?
|
10天前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
5天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
10 0
如何在Vue3项目中使用防抖节流技巧
|
5天前
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
本文介绍了在Vue3 + ElementPlus项目中如何使用`el-autocomplete`控件实现自动补全输入功能,并探讨了不同版本ElementPlus中`clearable`属性的兼容性问题。
25 0
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
|
5天前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
17 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
5天前
|
JavaScript
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
这篇文章介绍了Vue中router路由和router-link的使用方式,包括router配置、router-link在模板中的使用,以及实现的导航菜单和页面路由效果。
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
|
5天前
|
JavaScript IDE 开发工具
在vue项目中禁用eslint
这篇文章提供了多种方法来禁用Vue项目中的ESLint校验,包括修改配置文件和IDE设置,以适应不同版本的Vue项目和开发者的需求。
在vue项目中禁用eslint