vue開源項目

時間 2019-11-20

標籤 vue 開源項目简体版

原文原文鏈接

包括一些ui庫和比較完整的小項目。ui庫會對主要的單選框，多選框，級聯選擇器，滑塊，日期/時間選擇器，進度條，分頁，彈框，通知，導航菜單，步驟條等截圖比較php

寫在前面的css

評價純屬我的主觀感覺，有誇張成分，只是一種表達，若有不喜請無視之。歡迎指正不足和提供更多更好的vue庫，項目，方便參考和學習使用。html

1、前臺UI組件庫

====PC端====

1.Element

優勢：中文文檔，ui種類比較全，ui設計簡潔清晰vue

缺點：不夠有特色html5

2.iView

優勢：和element的UI很類似，有一些多的補充，能夠相互替換react

缺點：仍然沒有什麼特點webpack

8.At-ui

一款全新的平面UI套件，專門用於桌面應用程序ios

優勢：顏色比較素雅，UI比較秀氣git

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庫

2、單個組件

一、編輯器類

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