vue常用插件總結

原創 浩星 2020-06-23 04:09

一、UI組件及框架

  1. element - 餓了麼出品的Vue2的web UI工具套件

  2. mint-ui - Vue 2的移動UI元素

  3. iview - 基於 Vuejs 的開源 UI 組件庫

  4. Keen-UI - 輕量級的基本UI組件合集

  5. vue-material - 通過Vue Material和Vue 2建立精美的app應用

  6. muse-ui - 三端樣式一致的響應式 UI 庫

  7. vuetify - 爲移動而生的Vue JS 2組件框架

  8. vonic - 快速構建移動端單頁應用

  9. vue-blu - 幫助你輕鬆創建web應用

  10. vue-multiselect - Vue.js選擇框解決方案

  11. VueCircleMenu - 漂亮的vue圓環菜單

  12. vue-chat - vuejs和vuex及webpack的聊天示例

  13. radon-ui - 快速開發產品的Vue組件庫

  14. vue-waterfall - Vue.js的瀑布佈局組件

  15. vue-carbon - 基於 vue 開發MD風格的移動端

  16. vue-beauty - 由vue和ant design創建的優美UI組件

  17. bootstrap-vue - 應用於Vuejs2的Twitter的Bootstrap 4組件

  18. vueAdmin - 基於vuejs2和element的簡單的管理員模板

  19. vue-ztree - 用 vue 寫的樹層級組件

  20. vue-tree - vue樹視圖組件

  21. vue-tabs - 多tab頁輕型框架

二、滾動scroll組件

  1. vue-scroller - Vonic UI的功能性組件

  2. vue-mugen-scroll - 無限滾動組件

  3. vue-infinite-loading - VueJS的無限滾動插件

  4. vue-virtual-scroller - 帶任意數目數據的順暢的滾動

  5. vue-infinite-scroll - VueJS的無限滾動指令

  6. vue-scrollbar - 最簡單的滾動區域組件

  7. vue-scroll - vue滾動

  8. vue-pull-to-refresh - Vue2的上拉下拉

  9. mint-loadmore - VueJS的雙向下拉刷新組件

  10. vue-smoothscroll - smoothscroll的VueJS版本

三、slider組件

  1. vue-awesome-swiper - vue.js觸摸滑動組件

  2. vue-slick - 實現流暢輪播框的vue組件

  3. vue-swipe - VueJS觸摸滑塊

  4. vue-swiper - 易於使用的滑塊組件

  5. vue-images - 顯示一組圖片的lightbox組件

  6. vue-carousel-3d - VueJS的3D輪播組件

  7. vue-slide - vue輕量級滑動組件

  8. vue-slider - vue 滑動組件

  9. vue-m-carousel - vue 移動端輪播組件

  10. dd-vue-component - 訂單來了的公共組件庫

  11. vue-easy-slider - Vue 2.x的滑塊組件

四、編輯器

  1. markcook - 好看的markdown編輯器

  2. eme - 優雅的Markdown編輯器

  3. vue-syntax-highlight - Sublime Text語法高亮

  4. vue-quill-editor - 基於Quill適用於Vue2的富文本編輯器

  5. Vueditor - 所見即所得的編輯器

  6. vue-html5-editor - html5所見即所得編輯器

  7. vue2-editor - HTML編輯器

  8. vue-simplemde - VueJS的Markdown編輯器組件

  9. vue-quill - vue組件構建quill編輯器

五、圖表

  1. vue-table - 簡化數據表格

  2. vue-chartjs - vue中的Chartjs的封裝

  3. vue-charts - 輕鬆渲染一個圖表

  4. vue-chart - 強大的高速的vue圖表解析

  5. vue-highcharts - HighCharts組件

  6. chartjs - Vue Bulma的chartjs組件

  7. vue-chartkick - VueJS一行代碼實現優美圖表

六、日曆

  1. vue-calendar - 日期選擇插件

  2. vue-datepicker - 日曆和日期選擇組件

  3. vue-datetime-picker - 日期時間選擇控件

  4. vue2-calendar - 支持lunar和日期事件的日期選擇器

  5. vue-fullcalendar - 基於vue.js的全日曆組件

  6. vue-datepicker - 漂亮的Vue日期選擇器組件

  7. datepicker - 基於flatpickr的時間選擇組件

  8. vue2-timepicker - 下拉時間選擇器

  9. vue-date-picker - VueJS日期選擇器組件

  10. vue-datepicker-simple - 基於vue的日期選擇器

七、地址選擇

  1. vue-city - 城市選擇器

  2. vue-region-picker - 選擇中國的省份市和地區

八、地圖

  1. vue-amap - 基於Vue 2和高德地圖的地圖組件

  2. vue-google-maps - 帶有雙向數據綁定Google地圖組件

  3. vue-baidu-map- 基於 Vue 2的百度地圖組件庫

  4. vue-cmap - Vue China map可視化組件

九、播放器

  1. vue-video-player - VueJS視頻及直播播放器

  2. vue-video - Vue.js的HTML5視頻播放器

  3. vue-music-master - vue手機端網頁音樂播放器

十、文件上傳

  1. vue-upload-component - Vuejs文件上傳組件

  2. vue-core-image-upload - 輕量級的vue上傳插件

  3. vue-dropzone - 用於文件上傳的Vue組件

十一、圖片處理

  1. vue-lazyload-img - 移動優化的vue圖片懶加載插件

  2. vue-image-crop-upload - vue圖片剪裁上傳組件

  3. vue-svgicon - 創建svg圖標組件的工具

  4. vue-img-loader - 圖片加載UI組件

  5. vue-image-clip- 基於vue的圖像剪輯組件

  6. vue-progressive-image - Vue的漸進圖像加載插件

十二、提示

  1. vue-toast-mobile - VueJS的toast插件

  2. vue-msgbox - vuejs的消息框

  3. vue-tooltip - 帶綁定信息提示的提示工具

  4. vue-verify-pop - 帶氣泡提示的vue校驗插件

十三、進度條

  1. vue-radial-progress - Vue.js放射性進度條組件

  2. vue-progressbar - vue輕量級進度條

  3. vue2-loading-bar - 最簡單的仿Youtube加載條視圖

十四、開發框架彙總

  1. vue-admin - Vue管理面板框架

  2. electron-vue - Electron及VueJS快速啓動樣板

  3. vue-2.0-boilerplate - Vue2單頁應用樣板

  4. vue-webgulp - 仿VueJS Vue loader示例

  5. vue-bulma - 輕量級高性能MVVM Admin UI框架

  6. vue-spa-template - 前後端分離後的單頁應用開發

  7. Framework7-Vue - VueJS與Framework7結合

  8. vue-element-starter - vue啓動頁

十五、實用庫彙總

  1. vuelidate - 簡單輕量級的基於模塊的Vue.js驗證

  2. qingcheng - qingcheng主題

  3. vuex - 專爲 Vue.js 應用程序開發的狀態管理模式

  4. vue-axios - 將axios整合到VueJS的封裝

  5. vue-desktop - 創建管理面板網站的UI庫

  6. vue-meta - 管理app的meta信息

  7. avoriaz - VueJS測試實用工具庫

  8. vue-framework7 - 結合VueJS使用的Framework7組件

  9. vue-lazy-render - 用於Vue組件的延遲渲染

  10. vue-svg-icon - vue2的可變彩色svg圖標方案

  11. vue-online - reactive的在線和離線組件

  12. vue-password-strength-meter - 交互式密碼強度計

  13. vuep - 用實時編輯和預覽來渲染Vue組件

  14. vue-bootstrap-modal - vue的Bootstrap樣式組件

  15. element-admin - 支持 vuecli 的 Element UI 的後臺模板

  16. vue-shortkey - 應用於Vue.js的Vue-ShortKey 插件

  17. cleave - 基於cleave.js的Cleave組件

  18. vue-events - 簡化事件的VueJS插件

  19. http-vue-loader - 從html及js環境加載vue文件

  20. vue-electron - 將選擇的API封裝到Vue對象中的插件

  21. vue-router-transition - 頁面過渡插件

  22. vuemit - 處理VueJS事件

  23. vue-cordova - Cordova的VueJS插件

  24. vue-qart - 用於qartjs的Vue2指令

  25. vue-websocket - VueJS的Websocket插件

  26. vue-gesture - VueJS的手勢事件插件

  27. vue-local-storage - 具有類型支持的Vuejs本地儲存插件

  28. lazy-vue - 懶加載圖片

  29. vue-lazyloadImg - 圖片懶加載插件

  30. vue-bus - VueJS的事件總線

  31. vue-observe-visibility - 當元素在頁面上可見或隱藏時檢測

  32. vue-notifications - 非阻塞通知庫

  33. v-media-query - vue中添加用於配合媒體查詢的方法

  34. vuex-shared-mutations - 分享某種Vuex mutations

  35. vue-lazy-component - 懶加載組件或者元素的Vue指令

  36. vue-reactive-storage - vue插件的Reactive層

  37. vue-ts-loader - 在Vue裝載機檢查腳本

  38. vue-pagination-2 - 簡單通用的分頁組件

  39. vuex-i18n - 定位插件

  40. Vue.resize - 檢測HTML調整大小事件的vue指令

  41. vue-zoombox - 一個高級zoombox

  42. leo-vue-validator - 異步的表單驗證組件

  43. modal - Vue Bulma的modal組件

  44. Famous-Vue - Famous庫的vue組件

  45. vue-input-autosize - 基於內容自動調整文本輸入的大小

  46. vue-file-base64 - 將文件轉換爲Base64的vue組件

  47. Vue-Easy-Validator - 簡單的表單驗證

  48. vue-truncate-filter - 截斷字符串的VueJS過濾器

十六、服務端

  1. vue-ssr - 結合Express使用Vue2服務端渲染

  2. nuxt.js - 用於服務器渲染Vue app的最小化框架

  3. vue-ssr - 非常簡單的VueJS服務器端渲染模板

  4. vue-easy-renderer - Nodejs服務端渲染

  5. express-vue - 簡單的使用服務器端渲染vue.js

十七、輔助工具

  1. DejaVue - Vuejs可視化及壓力測試

  2. vue-generate-component - 輕鬆生成Vue js組件的CLI工具

  3. vscode-VueHelper - 目前vscode最好的vue代碼提示插件

  4. vue-play - 展示Vue組件的最小化框架

  5. VuejsStarterKit - vuejs starter套件

  6. vue-multipage-cli - 簡單的多頁CLI

十八、應用實例

  1. pagekit - 輕量級的CMS建站系統

  2. vuedo - 博客平臺

  3. koel - 基於網絡的個人音頻流媒體服務

  4. CMS-of-Blog - 博客內容管理器

  5. vue-cnode - 重寫vue版cnode社區

  6. vue-ghpages-blog - 依賴GitHub Pages無需本地生成的靜態博客

  7. swoole-vue-webim - Web版的聊天應用

  8. fewords - 功能極其簡單的筆記本

  9. jackblog-vue - 個人博客系統

  10. vue-blog - 使用Vue2.0 和Vuex的vue-blog

  11. vue-dashing-js - nuvo-dashing-js的fork

  12. rss-reader - 簡單的rss閱讀器

十九、Demo示例

  1. eleme - 高仿餓了麼app商家詳情

  2. NeteaseCloudWebApp - 高仿網易雲音樂的webapp

  3. vue-zhihu-daily - 知乎日報 with Vuejs

  4. Vue-cnodejs - 基於vue重寫Cnodejs.org的webapp

  5. vue2-demo - 從零構建vue2 + vue-router + vuex 開發環境

  6. vue-wechat - vue.js開發微信app界面

  7. vue-music - Vue 音樂搜索播放

  8. maizuo - vue/vuex/redux仿賣座網

  9. vue-demo - vue簡易留言板

  10. spa-starter-kit - 單頁應用啓動套件

  11. zhihudaily-vue - 知乎日報web版

  12. douban - 模仿豆瓣前端

  13. vue-Meizi - vue最新實戰項目

  14. vue-demo-kugou - vuejs仿寫酷狗音樂webapp

  15. vue2.0-taopiaopiao - vue2.0與express構建淘票票頁面

  16. node-vue-server-webpack - Node.js+Vue.js+webpack快速開發框架

  17. VueDemo_Sell_Eleme - Vue2高仿餓了麼外賣平臺

  18. vue-leancloud-blog - 一個前後端完全分離的單頁應用

  19. vue-fis3 - 流行開源工具集成demo

  20. mi-by-vue - VueJS仿小米官網

  21. vue-demo-maizuo - 使用Vue2全家桶仿製賣座電影

  22. vue2.x-douban - Vue2實現簡易豆瓣電影webApp

  23. vue-adminLte-vue-router - vue和adminLte整合應用

  24. vue-zhihudaily - 知乎日報 Web 版本

  25. Zhihu-Daily-Vue.js - Vuejs單頁網頁應用

  26. vue-axios-github - 登錄攔截登出功能

  27. vue2.x-Cnode - 基於vue全家桶的Cnode社區

  28. hello-vue-django - 使用帶有Django的vuejs的樣板項目

  29. websocket_chat - 基於vue和websocket的多人在線聊天室

  30. x-blog - 開源的個人blog項目

  31. vue-cnode - vue單頁應用demo

  32. vue-express-mongodb - 簡單的前後端分離案例

  33. photoShare - 基於圖片分享的社交平臺

  34. notepad - 本地存儲的記事本

  35. vue-zhihudaily-2.0 - 使用Vue2.0+vue-router+vuex創建的zhihudaily

  36. vueBlog - 前後端分離博客

  37. Zhihu_Daily - 基於Vue和Nodejs的Web單頁應用

  38. vue-ruby-china - VueJS框架搭建的rubychina平臺

  39. vue-koa-demo - 使用Vue2和Koa1的全棧demo

  40. life-app-vue - 使用vue2完成多功能集合到小webapp

  41. vue-trip - vue2做的出行webapp

  42. github-explorer - 尋找最有趣的GitHub庫

  43. vue-ssr-boilerplate - 精簡版的ofvue-hackernews-2

  44. vue-bushishiren - 不是詩人應用

  45. houtai - 基於vue和Element的後臺管理系統

  46. ios7-vue - 使用vue2.0 vue-router vuex模擬ios7

  47. Framework7-VueJS - 使用移動框架的示例

  48. cnode-vue - 基於vue和vue-router構建的cnodejs web網站SPA

  49. vue-cli-multipage-bootstrap - 將vue官方在線示例整合到組件中

  50. vue-cnode - 用 Vue 做的 CNode 官網

  51. seeMusic - 跨平臺雲音樂播放器

  52. HyaReader - 移動友好的閱讀器

  53. zhihu-daily - 輕鬆查看知乎日報內容

  54. vue-cnode - 使用cNode社區提供的接口

  55. zhihu-daily-vue - 知乎日報

  56. vue-dropload - 用以測試下拉加載與簡單路由

  57. vue-cnode-mobile - 搭建cnode社區

  58. Vuejs-SalePlatform - vuejs搭建的售賣平臺demo

  59. vue-memo - 用 vue寫的記事本應用

  60. sls-vuex2-demo - vuex2商城購物車demo

  61. v-notes - 簡單美觀的記事本

  62. vue-starter - VueJs項目的簡單啓動頁

    二十、其他實用插件彙總

  63. vue-dragging- 使元素可以拖拽

  64. Vue.Draggable- 實現拖放和視圖模型數組同步

  65. vue-picture-input- 移動友好的圖片文件輸入組件

  66. rubik- 基於Vuejs2的開源 UI 組件庫

  67. VueStar- 帶星星動畫的vue點贊按鈕

  68. vue-tables-2- 顯示數據的bootstrap樣式網格

  69. DataVisualization- 數據可視化

  70. vue-drag-and-drop-list- 創建排序列表的Vue指令

  71. vuwe- 基於微信WeUI所開發的專用於Vue2的組件庫

  72. vue-typer- 模擬用戶輸入選擇和刪除文本的Vue組件

  73. vue-impression- 移動Vuejs2 UI元素

  74. vue-datatable- 使用Vuejs創建的DataTableView

  75. vue-instant- 輕鬆創建自動提示的自定義搜索控件

  76. vue-slider-component- 在vue1和vue2中使用滑塊

  77. vue-touch-ripple- vuejs的觸摸ripple組件

  78. coffeebreak- 實時編輯CSS組件工具

  79. vue-datasource- 創建VueJS動態表格

  80. handsontable- 網頁表格組件

  81. vue-bootstrap-table- 可排序可檢索的表格

  82. vue-google-signin-button- 導入谷歌登錄按鈕

  83. vue-float-label- VueJS浮動標籤模式

  84. vue-tagsinput- 基於VueJS的標籤組件

  85. vue-social-sharing- 社交分享組件

  86. vue-popup-mixin- 用於管理彈出框的遮蓋層

  87. cubeex- 包含一套完整的移動UI

  88. vue-fullcalendar- vue FullCalendar封裝

  89. vue-material-design- Vue MD風格組件

  90. vue-morris- Vuejs組件封裝Morrisjs庫

  91. we-vue- Vue2及weui1開發的組件

  92. vue-form-2- 全面的HTML表單管理的解決方案

  93. vue-side-nav- 響應式的側邊導航

  94. mint-indicator- VueJS移動加載指示器插件

  95. vue-ripple- 製作谷歌MD風格漣漪效果的Vue組件

  96. vue-touch-keyboard- VueJS虛擬鍵盤組件

  97. vue-parallax- 整潔的視覺效果

  98. vue-typewriter- vue組件類型

  99. vue-ios-alertview- iOS7+ 風格的alertview服務

  100. paco-ui-vue- PACOUI的vue組件

  101. vue-button- Vue按鈕組件

					<div class="htmledit_views" id="content_views">
            <h3><a name="t22"></a><a></a>UI組件</h3>
  • 1
  • 2

開發框架

實用庫

服務端

  •  
  • nuxt.js - 用於服務器渲染Vue app的最小化框架
  • express-vue - 簡單的使用服務器端渲染vue.js
  • vue-ssr - 非常簡單的VueJS服務器端渲染模板
  • vue-ssr - 結合Express使用Vue2服務端渲染
  • vue-easy-renderer - Nodejs服務端渲染

輔助工具

應用實例

Demo示例

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

Vue加載OpenLayer入門教程（超簡單）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

element-ui中的el-table-column加v-if不生效，表頭錯亂

 項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"

杨哥杨哥万万岁 2020-07-08 12:30:46

vue中index.html文件爲什麼可以使用模板語法

今天無意間看到在項目的index.html文件中，使用了ejs的語法（後來知道是lodash），就非常費解，之前在node項目中，需要指定使用ejs模板引擎，在中間件中rander到前臺頁面。我理解的大概就是這個原理 查看了官方的解釋

杨哥杨哥万万岁 2020-07-08 12:30:46

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

Html Webpack Plugin: ReferenceError: process is not defined

修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>

真·skysys 2020-07-08 11:54:32

electron-vue項目引入element-ui

參考： https://www.jianshu.com/p/1defe83929f3 npm install element-ui main.js import ElementUI from 'element-ui' impor

真·skysys 2020-07-08 11:54:31

後端 Java 程序員眼中的 Vue——（一）創建及運行

現在 Vue 用的越來越多，工作上有時前後端都要搞，作爲後端程序員接手 Vue 該如何做呢，下面來記錄一下基礎的東西，並創建一個 Vue 項目 談 Vue 不能避開的 3 個東西 Node.js npm vue-cli No

厕所博士 2020-07-08 11:50:38

Axios--基礎知識

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue.js 裏面，什麼是虛擬DOM?

Vuejs 將DOM 抽象成一個以JavaScript 對象爲節點的虛擬DOM樹,以VNode節點模擬真實的DOM，可以對這顆抽象樹進行創建節點,刪除節點以及修改節點的操作, 經過diff算法得出一些需要修改的最小單位,再更新視圖,大大提

阿冰介 2020-07-08 11:48:15

vue 是怎麼實現數據響應的

簡述：Vuejs 的響應式依賴於Object.defineProprtry,通過監聽對象屬性 的setter/getter 的變化,通過getter 進行依賴收集,而setter相當於觀察者,數據產生變化的時候通知「訂閱者」更新視圖

阿冰介 2020-07-08 11:48:15

基於activiti5.22、SpringBoot2開發的流程解決方案，源碼分享

AgileBPM 敏捷工作流開發平臺 業務對象: 由實體（表）組成，支持任意數據結構（關聯關係），可以跨庫來組織業務對象（支持分佈式事務）。而且難以置信的支持N層。 業務表單: 表單完美的支撐了業務對象的展示，並支持豐富的前端組件和字段級

一直孤独的程序猿 2020-07-08 11:39:18

開發這樣一個複雜的表單你需要用多久

> 表單在中後臺開發的時，是最多也是最另人頭疼的，多級聯動，繁雜的驗證，動態解析等可算是苦不堪言。所以出現了無數的表單解決方案，像Uform, formily, NoForm等等一大堆用來解決中後臺開發表單，可想而知，解決複雜的表單開發是

迷路的蝙蝠 2020-07-08 11:35:02

vue的slot（slot具名插槽。slot非具名插槽，slot的作用域，）

vue的slot 1、什麼是slot slot是插槽，插即是可以插入，槽就是坑，即是可以再代碼中插入 如果子組件模板中不包含插口，那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時，父組件傳入的整個內容片段，將插入到

ljljlj1993 2020-07-08 11:14:40