vue开源项目 - xiaoge2016的个人空间 - 开源中国

安宇雨 - 随手采集
2018-11-05 09:26:16
随手采集
0000-未整理-等待研究

开发十年，就只剩下这套Java开发体系了 >>>

包括一些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>