vue开源项目

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34223655

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1k

点赞数 1

文章标签： javascript 数据库 ui ViewUI

原文链接：https://my.oschina.net/u/3018050/blog/2049912

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

写在前面的

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

一、前台UI组件库

====PC端====

1.Element

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

缺点：不够有特点

2.iView

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

缺点：仍然没有什么特色

24.vuesax

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

缺点：没有轮播图

33.N3

图标比较多,配色比较明艳，时间选择器采用上下推拉的方式，非常有特点.有简单的轮播图

缺点：过度动画比较少

35.AliTelecom UI（atui）

支持vue2.x，阿里通信技术团队打造

应该是出来不久，文档部分切换组件还会保留之前组件的效果

整体都比较简洁，输入框提示效果比较常用，搜索组件带x带图标和下拉选项是比较实用的

树形组件，选择器，手风琴，导航等组件有点朴实

整体来说除了搜索组件实用外，没什么特点，ui偏小巧，风格和element ui很像，但是放在一起规格偏小

====移动端====

5.Quasar

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

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

支持修改手机地址条颜色

缺点：非中文文档，文档导航不显著

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

10.mint-ui

饿了么团队

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

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

12.vue-carbon

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

缺点：在中国可能不是主流（国人喜欢花花绿绿，字体大大的）

13.vuwe

优点：样式上和微信很像

缺点：直接使用，没有说明，文档不好用

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

14.cubeex

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

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

20.Framework7 Vue

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

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

25.Vonix

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

26.vux

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

29.Onsen Ui

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

36.SUI Mobile

阿里巴巴共享业务事业部UED团队

官网页面颜色挺好看的，组件基本比较实用，但不太好看

37.Weui

微信官方设计团队

项目地址：https://github.com/Tencent/weui

这一套应该很眼熟了，就不多截图了

41.YDUI

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

====通用====

3.Vuetify

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

缺点：种类不如前面全

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

4.Vue-material

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

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

16. Muse-UI

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

17. Uiv

用于 Vue 2 的 Bootstrap 3 组件库。

19.Fish-UI

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

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

30.Semantic-UI-Vue

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

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

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

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

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

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

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

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

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

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

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

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

有中文文档

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

分割前

分割后

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

39.ZUI

基于 Bootstrap 深度定制

文档设计比较有特点。整体很清晰，舒适，说明也细致。

组件丰富

有反色选项，有编辑器，轮播图，日历等很多ui库需要另外安装的组件

利用html5特性，做了代码，本地存储，拖拽，取色，图片剪裁等组件，使用更方便

图片上传组件效果较好（有缩略图，图片文件名，大小，上传进度，下载按钮显示，支持多图上传）

评论组件各类排版嵌套组合比较实用

有卡片样式，文章、列表的布局，同时结合chat.js的图表

提供简单的组织结构图，让代码展示更简单

仪表盘结合拖拽操作，可以让面板更灵活，图片浏览提供灯箱查看，数据表格可以悬停1列

缺点：单选、多选框使用的是浏览器默认样式

40.vuecidity

开始看到一篇蓝蓝高饱和的界面，优点吓到我了

后来意外发现聊天样式很有特点

国旗可以选择长方形或者圆形

icon有很多emoji的彩色图标（http://icons.wemakesites.net/#/ionicons.com）

时间线，选择器很好看，有特点

表单点击填色很亮眼

缺点：demo中没有表单验证错误提示显示，这部分可能要自己做

43.Ant Design Vue

ant design的vue中文版，文档友好，主题配色什么的都很好用，报错少

响应式，国际化

虽然样式还是没特点，但是组件很实用

分页组件比较好用

瑕疵：传图组件没有对横向距离较长的图片做裁切

45.amaze UI

官方写的是从移动小屏幕到大屏幕，全支持。

UI设计没有特别惊艳的地方，不过好就好在有很多简单但常用的排版布局和小功能。

诸如：页头，页尾，回顶部，画廊，移动端的工具栏等等布局基本不需要调整，直接使用

官网写的是支持react，百度github项目：https://github.com/zcoding/amazeui-vue

项目中还未开发的组件

----特别----

2.aframe

a- frame是构建虚拟现实(VR)体验的web框架,支持大多数VR耳机

使用DOM，但它的元素不会触及浏览器布局引擎。3D对象更新都是在内存中完成的

兼容大多数库、框架和工具，包括React、Preact、Vue。js, d3。js,安博。js, jQuery。

3.vuestorefront

github里有视频介绍，不过是youtubo的，对国内而言不太方便。文档在官网没有找到，项目地址里貌似有，但是需要搭建环境看，不推荐

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You can deactivate cookies through a functionality built into your web browser. To find out more about the cookies we use, see our Privacy Policy.

我们使用cookie来个性化内容和广告，提供社交媒体功能和分析流量。我们还与我们的社交媒体、广告和分析合作伙伴共享您使用我们网站的信息，这些合作伙伴可能会将其与您提供给他们的或他们从您使用他们的服务中收集的其他信息相结合。您可以通过内置在web浏览器中的功能禁用cookie。要了解更多关于我们使用的cookie的信息，请参阅我们的隐私政策。

+非vue支持+

1.webix

收费项目

官网设计颜值给力，文档效果为静态截图，查看在线demo代码效果稍慢

提供在线编辑表格（excel视图）、PDF视图功能

提供子弹图，条形码，抵押图，hint（暗示-弹框步骤指引），组织图，心电图，树形图等多种使用功能

geochart地图，google图表显示

查询生成器

官网提供在线代码编辑

缺点：非中文，无表单验证效果，按钮比较简单，自带图表较少

2.layui

后台ui库

二、单个组件

1、编辑器类

（1）ribbon

（2）vue-quill-editor

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

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

（3）Vueditor

优点：排版简洁，所见所得

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

（4）vue-html5-editor

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

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

（5）vue-simplemde

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

★35 - VueJS的Markdown编辑器组件

2.可视图表

（1）vue-chartjs

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

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

（2）DataVisualization

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

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

★149 - 数据可视化

（3）vue-charts

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

★101 - 轻松渲染一个图表

（4）vue-chartkick

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

（5）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>