Vue.js
1. ElemeFE/element
tag:vue javascript components
star:15.8k
link:https://github.com/ElemeFE/element
简介
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地创建布局。
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 的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。
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
事无巨细的文档
可自定义主题
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
基于优秀的第三方库
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,开发更加快速
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.