10個優秀的 Vue 開源專案及合集推薦

使用 Vue 的好處

• 該框架非常小，約為18–21KB；
• Vue 支持用基于組件的方法來構建 Web 應用；
• 詳細的檔案，這對于初學者來說很容易上手；
• 易于理解，由于其結構簡單，你可以輕松地把 Vue.js 添加到自己的 Web 專案里，它憑借定義良好的體系結構來保存你的資料，生命周期方法和自定義方法是分開的；
• 輕松的集成，你可以通過 CDN 來輕松添加 Vue.js，不依賴 Node.js 和 npm 環境就可以用，完全可以把它當成替代 jQuery 的絕佳選擇；
• 出色的工具， 通過 Vue CLI ，你可以使用內置的路由、狀態存盤、Lint、單元測驗、CSS前處理器、Typescript、PWA 等來啟動新專案，此外，Vue CLI 還提供了用于管理專案的UI

UI組件

iView

Vue UI 組件工具包

Website: https://iviewui.com/

GitHub: https://github.com/iview/iview

GitHub Stars: 22.8k

不斷的更新使這組 UI 組件成為具有不同技能水平的開發人員的不錯選擇，但是你應該知道它不支持IE8，

要開始使用 iView，請確保你對單檔案組件有充分的了解，該專案具有友好的 API 和大量檔案，

Vue.js Modal

高度可定制的 Modal

Website: http://vue-js-modal.yev.io/

GitHub: https://github.com/euvl/vue-js-modal

GitHub Stars: 2.9k

你可以在網站上查看所有不同型別的模態視窗，總共有15個按鈕，隨意點擊一個，你將會看到一個模態視窗示例，

Light Blue Vue Admin

用于管理資訊中心的 Vue.js 模板

Website: https://flatlogic.com/templates/light-blue-vue-lite

GitHub: https://github.com/flatlogic/light-blue-vue-admin

GitHub Stars: 76

演示：https://demo.flatlogic.com/light-blue-vue-admin/#/app

檔案：https://demo.flatlogic.com/light-blue/documentation/

該模板是用 Vue CLI 和 Bootstrap 4 構建的，從演示中可以看到，該模板具有一組非常基本的頁面：排版、地圖、圖表、聊天等，如果你需要擴展模板，則可以看一下有著 60 多個組件的 Light Blue Vue Full，它不含 jQuery，并且具有兩個顏色主題，

Mint UI

移動端界面元素

Website: http://mint-ui.github.io/#!/en

GitHub: https://github.com/ElemeFE/mint-ui

GitHub Stars: 15.2k

使用現成的 CSS 和 JS 組件能夠更快地構建移動應用，使用此工具，你不必擔心生成大檔案的風險，因為你可以按需加載，影片由 CSS3 處理，要使用 Mint UI 需要安裝 npm，你應該嘗試預測應用程式所需的所有組件，并僅匯入必要的組件，完整的代碼（包括 CSS 檔案）僅 30kb，

Vuetify

Website： https://vuetifyjs.com/en/

Github: https://github.com/vuetifyjs/vuetify

Github stars: 25.6k

Vuetify 根據材料設計規范提供了大量的精制組件（80+），Vuetify 結合了 Vue.js 和 Material 的所有優點，該框架與 RTL 和 Vue CLI-3 兼容，Vuetify 的所有組件都有很好的檔案，也有清晰的示例，它可以用于 Vue 的服務器端渲染（SSR），Vuetify 支持所有現代的 Web 瀏覽器，甚至包括 IE11 和 Safari 9+（帶有 polyfill），它還帶有現成的專案支架，你可以通過一個命令開始構建 Vue.js 應用，

Buefy

Website： https://buefy.org/

Github: https://github.com/buefy/buefy

Github stars: 7.6k

Buefy 為基于 Bulma 的 Vue.js 提供了輕量級的 UI 組件，Buefy 有兩個核心原則：使事情簡單和輕巧，這就解釋了為什么 Vue 和 Bulma 是它唯一的依賴，盡管只有 40 多個組件，但它為你提供了開箱即用的移動優先和回應式 UI 組件，

特性

• 支持 Material Design 圖示和 FontAwesome；

• 非常輕巧，除了 Vue 和 Bulma 之外，沒有任何內部依賴；

• 約 88KB；

• 語意代碼輸出，

Vue Material

Website： https://vuematerial.io/

Github: https://github.com/vuematerial/vue-material

Github stars: 8.8k

Vue Material 簡單、輕巧，并且完全按照 Google Material Design 規范構建，Vue Material 提供了超過 56個組件來構建不同型別的布局，Material Design Framework 擁有真正完整的檔案，該框架非常輕巧，具有完全符合Google Material Design 指南的所有組件，這種設計并支持所有的現代瀏覽器適合所有的螢屏，

工具包

Nuxt.js

Website： https://nuxtjs.org/

Github： https://github.com/nuxt/nuxt.js

Github stars: 27.4k

Nuxt 是一個簡單而直接的框架，用于構建通用程式，例如：服務器端渲染的應用，單頁應用，漸進式 Web 應用，或只是把它用作靜態站點生成器，它也是模塊化的，所以你只需使用程式所需的那些模塊即可，Nuxt 使你不必糾結于構建和優化程式的作業，Nuxt.js 具有模塊化架構，有50多個模塊可供選擇，

Quasar

Website： https://quasar.dev/

Github： https://github.com/quasarframework/quasar

Github stars: 14.8k

Quasar 是一個基于 Vue 的通用框架，可讓你用相同的代碼庫為不同平臺撰寫應用程式：SPA，PWA，SSR 應用，混合移動應用或多平臺桌面應用，Quasar 包含多達 81 個組件，

這里有大量的檔案和的組件，這些組件在設計時都考慮了性能和回應能力，Quasar 默認情況下集成了最佳做法（HTML/CSS/JS最小化、快取清除、tree shaking，源映射、帶有延遲加載的代碼拆分、ES6 生成，code-splitting、可訪問性等），所以你只需要把經歷放在程式的功能上，它還提供了一個 CLI 工具，用于輕松構建新的專案，

Bootstrap Vue

Website： https://bootstrap-vue.org/

Github: https://github.com/bootstrap-vue/bootstrap-vue

Github stars: 11.5k

Bootstrap Vue 是基于 Bootstrap 庫的 UI 套件，它只是用 Vue 代碼替換了常規的 Bootstrap 組件中的JavaScript，借助 Bootstrap Vue，你可以使用 Vue.js 和世界上最受歡迎的前端 CSS 庫——Bootstrap v4 在 Web 上構建回應式、移動優先和 ARIA 可訪問的專案，它還可以輕松地與 Nuxt.js 集成，

覺得寫得不錯的話，請用你們發財的小手點個贊叭！