文档章节

vue开源项目

xiaoge2016
 xiaoge2016
发布于 09/12 00:36
字数 3114
阅读 10357
收藏 134

包括一些ui库和比较完整的小项目。ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进度条,分页,弹框,通知,导航菜单,步骤条等截图比较

写在前面的

评价纯属个人主观感受,有夸张成分,只是一种表达,如有不喜请无视之。欢迎指正不足和提供更多更好的vue库,项目,方便参考和学习使用。

一、前台UI组件库

1.Element

优点:中文文档,ui种类比较全,ui设计简洁清晰

缺点:不够有特点

 

2.iView

优点:和element的UI很相似,有一些多的补充,可以相互替换

缺点:仍然没有什么特色

 

3.Vuetify

优点:时间选择器是时钟样式,比较有特色。中文文档

缺点:种类不如前面全

地址:https://vuetifyjs.com/zh-Hans/

4.Vue-material

优点:日期选择器配色舒适,进度条样式有虚线形式,步骤条更清晰相比有创新。表单字段点击后文字会上浮

缺点:目前种类还比较少,遗憾没有时间选择器。非中文文档

5.Quasar

非常棒的ui库,效果很多,文档上给的效果是移动端的。

在树状图,评分器,上传图片,轮播图装饰,等待图,按钮,滑动条等多方面都有不错的样式效果。

支持修改手机地址条颜色

缺点:非中文文档,文档导航不显著

构建响应式网站,PWA,混合移动应用程序

 

6.Buefy

优点:时间选择器数字很大有特点

缺点:非中文文档

7.Vant

优点:移动端界面,轻量化,基本涵盖移动端交互的ui,和微信样式很像

8.At-ui

一款全新的平面UI套件,专门用于桌面应用程序

优点:颜色比较素雅,UI比较秀气

9.Vue-js-modal

关于模态框的ui库,配色和阴影上适合音乐娱乐类项目

10.Vuex-loading

等待相关进度的一些库

缺点:并不是那么好看,使用的话,最好手动调调整一下样式

11.Vue-js-grid

可移动方格子位置的库

12.Dockeron

docker上的ui库,使用后再回补

13.mint-ui

优点:风格简洁,文档中移动端看的效果清晰

缺点:中文字体和间距比例上稍稍偏大

14.Keen-UI 

优点:移动端框架,日期选择器比较好看。
缺点:非中文文档

15.VueCircleMenu

优点:提供各种从中间蹦跶出半圆形按钮的组件方案,主流ui库给的比较少,有了它可以不用自己写了

缺点:配色视图有点惨

16.vue-carbon 

有点:很淡雅的风格,虽然颜色只有一种,但是字体和间距给的很好,一眼过去很舒服,ui相比要做的事情不会喧宾夺主。

缺点:在中国可能不是主流(国人喜欢花花绿绿,字体大大的)

17.vue-calendar 

特别中国特色,排版稍稍有点拥挤,但是有农历,好评!

18.vue-datetime-picker

19.vue2-calendar 

优点:日期选择器中支持自定义事件的稀缺

★181 - 支持lunar和日期事件的日期选择器

20.vue-datepicker

日期选择器简洁大气,希望可以有匹配的时间选择器

21.vue-datepicker 

优点:很小巧,没有多余的装饰,不占版面

22.vue-date-picker 

★59 - VueJS日期选择器组件

23.vue-fullcalendar 

大格子化日期选择器,酒店入住等游玩类网站会用到

24.vue-datepicker-simple

月份选择排版蛮特别,极少数用这么正红配色的日期选择器

 ★20 - 基于vue的日期选择

25.vcalendar

 

26.vue-datepicker

27.vue-jLunar-datePicker

25.vue-chartjs 

可视化图表的vue版本,主要饼形图,条形图,雷达图等都有

缺点:样式太简,使用还需调整,相比百度的Echart还是少太多图类

26.DataVisualization 

提供四个最简单的图类,比较实用

缺点:配色上背景太花,前景色饱和度太低,需要调整

★149 - 数据可视化

27.vue-charts 

样式比较好看,但目前图标类型还是太少

★101 - 轻松渲染一个图表

28.vue-chartkick 

★22 - VueJS一行代码实现优美图表

29.Echarts

很全面的图表插件

npm install vue-echarts --save

/*在.vue中引入*/
<template>
  <div class="box">
    <div class="item">
      <div class="subbox">
        <e-charts :options="polar"></e-charts>          
      </div>
    </div>
  </div>
</template>

<script>
//如果你不在乎打包大小,直接引入全部代码可以快速无忧展开
import ECharts from "vue-echarts"

//如果你不在乎打包大小,以下是优化引入打包的代码
//(上面的全部代码引入import应注释掉)
import ECharts from "vue-echarts/components/ECharts.vue";

import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/polar";

export default {
  components: {
    ECharts: ECharts
  },
  data() {
    let data = [];
    for (let i = 0; i <= 360; i++) {
      let t = i / 180 * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }
    return {
      polar: {
        title: {
          text: "极坐标双数值轴"
        },
        legend: {
          data: ["line"]
        },
        polar: {
          center: ["50%", "54%"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        angleAxis: {
          type: "value",
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    };
  },
};
</script>

29.vue-quill-editor 

不似很多富文本编辑器好几行的功能,但是排版简洁清晰,主要功能都有,样式比较好看

★149 - 基于Quill适用于Vue2的富文本编辑器

 

30.Vueditor 

优点:排版简洁,所见所得

★138 - 所见即所得的编辑器

31.vue-html5-editor 

小巧实用,可适合移动办公

★132 - html5所见即所得编辑器

32.vue-simplemde 

优点:高亮代码的富文本编辑器,配色舒适,间距好

★35 - VueJS的Markdown编辑器组件

33.vuwe 

优点:样式上和微信很像

缺点:直接使用,没有说明,文档不好用

★107 - 基于微信WeUI所开发的专用于Vue2的组件库

34.cubeex 

上下间距比较大,对不是特别高分辨率的旧版本视觉感受比较友好

★33 - 包含一套完整的移动UI

35.vue-region-picker 

优点:不用自己再找数据调配省市区

缺点:样式极简,除了老板式银行金融类网站外,基本没有直接这么样式使用的,需要调样式

★89 - 选择中国的省份市和地区

36.vue-awesome-swiper

多种显示的轮播图组件

37.vue-slick

轮播图组建ui比较太别

38.vue-material-design 

表单类ui,简洁

39. Muse-UI

优点:非常好看的时间、日期选择器!官网页面特别有爱的设计,相信其他组件随着时间也会不断完善

40. Uiv

用于 Vue 2 的 Bootstrap 3 组件库。

41.Vuikit

 

42.Fish-UI

灰白配色的ui库,干净利落,偏向欧美表单风格

灰色的色度,线条粗细,文字字体选择,间距给人的感觉真的像会呼吸的鱼在水中一样自在

42.Framework7 Vue

优点:目前发现的唯一对安卓和苹果上,ui的不同效果做出效果图说明的UI库。从按钮到轮播图非常全面

特点:那个艳红的官网真的是惊到我的视觉了

43.Cube UI

很有特色的ui设计,类型比较全。活动效果比较好

44.Vueblu

比较简洁,各种角度的提供了过度动画

45.Ant Design Vue

非常扁平化的ui,没有阴影,没有线框,纯色填充

46.vuesax

好看的ui库,阴影恰到好处,消息提示框是动态的,按钮支持图标,图片上传效果好看,有英文教程视频

缺点:没有轮播图

47.Material Design

48.vux

移动端国产框架,轻易在这里使用开箱即用的地址选择器,让用户轻易设定省、市、区。样式和微信很像

49.vue-js-toggle-button

很容易使用的切换按钮
可以方便的设置大小、颜色

 

50.vue-slider-component

51.vue-input-tag

 

52.Vonix

移动端框架,侧边栏,ios,安卓,微信区别的选项卡,省市县三行级联操作,弹层内轮播图是其特点

53.YDUI

样式上优部分微信ui和比较老的电商框架ui,rollnotice滚动是特点

54.WE-VUE

55.radon

音乐播放器样式,数组件带选项

56.Rubik

卡片带图片样式比较多,输入框带icon变色,图片懒加载

57.Onsen Ui

多种框架预言支持,ios和安卓区别,所有效果均有截图对比,可以在线修改代码运行,实例比较多

58.Semantic-UI-Vue

非常喜欢的一个ui库,包含种类丰富,设计简洁,符合国际主流。

很多组件提供多颜色和反转颜色。

按钮类型多达11种,但并不是按照大小区分,而是提供了互联网界主要公司的参考示例。

从容器中可以看出,以流式布局为主,并且在移动端和pc端都有。

提供国旗显示,根据网站风格提供,5类标题显示。在图片和文字布局方面提供更多示例。有角标,多种标签。这样就不用写好多css了

轨道(文本附近做笔记),揭示(多种动画图形和文字显示),分段(提供颜色反转,不用下载太多主题),布置(小块图文标题组合)

多种广告尺寸布局,评论,动态,统计样式。

折叠菜单样式清爽,提供内容遮罩,弹出层动画比较舒适

搜索样式简单,提供输入文字中,右侧图标旋转的样式

形状提供类似4个方向类似3D盒子的切换效果

边栏效果,粘贴效果(粘性对与ui铁路因为经常“被困”内容用于占用额外的画布空间之外的一个网站的主要内容,确保跟踪链接,广告,和其他辅助内容仍然在屏幕上同时参与网站主要内容。)

提供多个方式多个角度的渐变消失效果

有中文文档

缺点:文档到了input,表单等页面就非常卡,不好看到效果

分割前

分割后

输入框文档这里特别容易卡

 

 

二、后台UI库

1.Vue-element-admin

非常全面的后台UI库,设计非常适合商业应用

2.Vue-admin

图表图形的设计虽说不是那么惊艳,但是粗细和配色非常会突出重点

3.vueAdmin

优点:全面,适合中国的主流群体设计

缺点:不对年轻人风格,非常常规的后台设计

 

4.

 

三、其他

1.Best-resume-ever

2.vue-hackernews-2.0

vue-router&vuex和服务器端渲染 [Github star:6687]。

 

3.Vue-devtools (v 4.0)

用于调试Vue.js应用程序的Chrome devtools扩展程序 [Github star:6292]

 

4.Electron-vue

Electron&Vue.js快速启动样板,包括vue-cli脚手架,通用Vue插件, electron-packager/electron-builder,单元/e2e测试,vue-devtools和webpack

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

5.Vue-loader (v 13)

Vue.js组件的Webpack加载程序(loader) [Github star:2588]

6.Vuepack (v 3.0)

一个使用Vue 2,Vuex,Vue-router和Webpack 2(甚至是Electron)的新潮种子项目。 [Github star:2077]

7.Codesandbox

专为Web应用程序开发而设计的在线代码编辑器 [Github star:1552]

8.Vuefire (v 2.0)

Firebase 2&> = 3的Vue.js 1&2绑定 [Github star:1228]

9.Vue-tetris

使用Vue,Vuex,Immutable做俄罗斯方块 [Github star:1152]

10.Vue-recyclerview

使用vue-recyclerview掌握大型列表 [Github star:1021]

11.Vuex-persistedstate (v 2.0)

用本地存储保持Vuex状态

12.Vue-test-utils

用于测试Vue组件的实用程序 [Github star:977]

13.Vue-meta (v 1.0)

管理Vue 2.0组件中的页面元信息,支持SSR +流媒体。

14.ESLint-plugin-vue

官方ESLint的Vue.js插件 [Github star:864]

15.Vue-tables-2

Vue.js 2 网格组件 [Github star:540]

16.Vue-baidu-map

优点:功能简单实用

缺点:样式不好看

17.vue-amap

 

 

18.vue-waterfall 

★605 - Vue.js的瀑布布局组件

 

四、一些项目

1.IFmiss / vue-music

http://www.daiwei.org/vue-music.html#/mymusic

2.仿豆瓣项目

https://github.com/jeneser/douban

3.markcook

 ★318 - 好看的markdown编辑器

 

 

参考文档:

1.Vue相关开源项目库汇总:https://blog.csdn.net/sinat_17775997/article/details/60580683

2.推荐21个顶级的Vue UI库!:https://baijiahao.baidu.com/s?id=1604546957811183734&wfr=spider&for=pc

3.Vue资源精选:http://vue.awesometiny.com/

© 著作权归作者所有

共有 人打赏支持
上一篇: Django QuerySet API
xiaoge2016
粉丝 11
博文 197
码字总数 192563
作品 0
西安
私信 提问
加载中

评论(32)

徐胜祥
徐胜祥

引用来自“木子李的日常_”的评论

有料,主流的都标注了,特意评论支持
------高处甚寒___
------高处甚寒___
怎么找的 厉害了
苦逼的前端
苦逼的前端
66666,给作者点赞
m
mross
厉害里 好多新的UI库
且无需多言
且无需多言
哇哈哈,实用
唐代de豆腐
唐代de豆腐
不错,后台ui我一般用iview
pe_mail2006
pe_mail2006
https://www.ctolib.com/cheatsheets-vuejs.html 和 https://www.ctolib.com/javascript/categories/javascript-vuejs.html 也收录不少项目
阳光下的豚2011
阳光下的豚2011
厉害!!
SevensChan
SevensChan
https://www.npmjs.com/package/vue-neon-light 这个霓虹灯挺酷的
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
06/29
0
0
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
08/01
0
0
如何看待Vue在Github上的 star 数超越 React

如果要问这两年,前端最火的框架是什么,我相信100%的人都会说React和Vue。React是 Facebook 开源的一套JavaScript MVC 框架,由于 React的设计思想极其独特,属于革命性创新,性能出众,代码...

全部原谅
08/14
0
0
electron-vue模仿网易云桌面应用体验

简介 像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api...

皆随你
11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

binlog2sql mysql数据库闪回工具

binlog2sql工具比mysqlbinlog+sed恢复更快捷。 1、安装: 从github上下载:https://github.com/danfengcao/binlog2sql shell> git clone https://github.com/danfengcao/binlog2sql.git && c......

mickelfeng
23分钟前
2
0
SpringCloud 复杂对象接收时候对象变成LinkeHashMap

如果定义feign接口为 @PostMapping("/user/queryUserByAccountStatus") BaseResult queryUserByAccountStatus(@RequestBody AccountsTenantIdStatusArg arg); 其中BaseResult的范性应该为Lis......

xiaomin0322
24分钟前
1
0
Android/Java 读、写MP3文件ID3V1信息

MP3的歌曲信息一般分两个大版本,分别是ID3V1和ID3V2,其中V2又分为好几个版本,具体百度一下,下方的代码仅仅是支持ID3V1。 需要用到的一个辅助工具(juniversalchardet)用于解决乱码问题,...

她叫我小渝
24分钟前
1
0
thymeleaf的onclick标签传参异常

异常 org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trust......

EasyProgramming
25分钟前
1
0
前端杂谈: CSS 权重 (Specificity)

前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高于 class selector...

ssthouse_hust
32分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部