作者：前端瓶子君转发链接：https://mp.weixin.qq.com/s/W8Fvn1ubcKwjo-C7LQvU7w前言Vue 结合了 React 和 Angular 的优点，并且有着团结、活跃且庞大的社区，可以帮助解决开发中遇到的问题。开源社区不断提出解决问题的新方法。工具和库的数量也贡献量不断的增加。使用 Vue 的好处该框架非常小。约为18–21KB；Vue 支持用基于组件的方法来构建 Web 应用；详细的文档。这对于初学者来说很容易上手；易于理解。由于其结构简单，你可以轻松地把 Vue.js 添加到自己的 Web 项目里。它凭借定义良好的体系结构来保存你的数据。生命周期方法和自定义方法是分开的；轻松的集成。你可以通过 CDN 来轻松添加 Vue.js，不依赖 Node.js 和 npm 环境就可以用。完全可以把它当成替代 jQuery 的绝佳选择；出色的工具。 通过 Vue CLI ，你可以使用内置的路由、状态存储、Lint、单元测试、CSS预处理器、Typescript、PWA 等来启动新项目。此外，Vue CLI 还提供了用于管理项目的UI。Vue开源项目下面汇总了一些非常流行的工具和库，并包括在 Vue 生态系统中所涉及到的其他库和插件。是根据其有用性、有效性、文档、思想和贡献指南进行选择的。UI组件Vuetify网站： https://vuetifyjs.com/en/Github: https://github.com/vuetifyjs/vuetifyDemo: –License: MITGithub stars: 25.6kVuetify projectVuetify 根据材料设计规范提供了大量的精制组件（80+）。Vuetify 结合了 Vue.js 和 Material 的所有优点。该框架与 RTL 和 Vue CLI-3 兼容。Vuetify 的所有组件都有很好的文档，也有清晰的示例。它可以用于 Vue 的服务器端渲染（SSR）。Vuetify 支持所有现代的 Web 浏览器，甚至包括 IE11 和 Safari 9+（带有 polyfill）。它还带有现成的项目支架，你可以通过一个命令开始构建 Vue.js 应用。它根据材料设计提供了一组组件，例如：Buttons;Inputs;Cards;轮播；Tables,列表。Vuetify 背后有一个充满活力的社区，500 多个贡献者创建了大量的 Vuetify 插件。它有优质开源项目的所有要素：广泛的文档，文稿指南，问题管理等。Buefy网站： https://buefy.org/Github: https://github.com/buefy/buefyDemo: https://buefy.org/expo/License: MITGithub stars: 7.6kBuefy logoBuefy 为基于 Bulma 的 Vue.js 提供了轻量级的 UI 组件。Buefy 有两个核心原则：使事情简单和轻巧。这就解释了为什么 Vue 和 Bulma 是它唯一的依赖。尽管只有 40 多个组件，但它为你提供了开箱即用的移动优先和响应式 UI 组件。特性：支持 Material Design 图标和 FontAwesome；非常轻巧，除了 Vue 和 Bulma 之外，没有任何内部依赖；约 88KB；语义代码输出。Vue Material网站： https://vuematerial.io/Github: https://github.com/vuematerial/vue-materialDemo: –License: MITGithub stars: 8.8kVue Material projectVue Material 简单、轻巧，并且完全按照 Google Material Design 规范构建。Vue Material 提供了超过 56个组件来构建不同类型的布局。Material Design Framework 拥有真正完整的文档。该框架非常轻巧，具有完全符合Google Material Design 指南的所有组件。这种设计并支持所有的现代浏览器适合所有的屏幕。工具包Nuxt.js网站： https://nuxtjs.org/Github： https://github.com/nuxt/nuxt.jsDemo: –License: MITGithub stars: 27.4kNuxt.js logoNuxt 是一个简单而直接的框架，用于构建通用程序，例如：服务器端渲染的应用，单页应用，渐进式 Web 应用，或只是把它用作静态站点生成器。它也是模块化的，所以你只需使用程序所需的那些模块即可。Nuxt 使你不必纠结于构建和优化程序的工作。Nuxt.js 具有模块化架构，有50多个模块可供选择。特征：自动转译和打包（通过 webpack 和 babel）；代码热加载；可以选择服务器端渲染、单页应用程序或静态生成；可通过 nuxt.config.js 文件进行配置；为每个页面的页代码进行拆分；带有 layouts/目录的自定义布局；仅加载关键的CSS（页面级）。Nuxt 成为 Vue 开发不可或缺的一部分，有许多贡献者和广泛的社区。Quasar网站： https://quasar.dev/Github： https://github.com/quasarframework/quasarDemo: –License: MITGithub stars: 14.8kQuasar frameworkQuasar 是一个基于 Vue 的通用框架，可让你用相同的代码库为不同平台编写应用程序：SPA，PWA，SSR 应用，混合移动应用或多平台桌面应用。Quasar 包含多达 81 个组件。这里有大量的文档和的组件，这些组件在设计时都考虑了性能和响应能力。Quasar 默认情况下集成了最佳做法（HTML/CSS/JS最小化、缓存清除、tree shaking，源映射、带有延迟加载的代码拆分、ES6 生成，code-splitting、可访问性等），所以你只需要把经历放在程序的功能上。它还提供了一个 CLI 工具，用于轻松构建新的项目。Bootstrap Vue网站： https://bootstrap-vue.org/Github: https://github.com/bootstrap-vue/bootstrap-vueDemo: https://bootstrap-vue.org/playLicense: MITGithub stars: 11.5kBootstrap Vue logoBootstrap Vue 是基于 Bootstrap 库的 UI 套件。它只是用 Vue 代码替换了常规的 Bootstrap 组件中的JavaScript。借助 Bootstrap Vue，你可以使用 Vue.js 和世界上最受欢迎的前端 CSS 库——Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。它还可以轻松地与 Nuxt.js 集成。文档内容丰富，加上强大的社区支持，这使你可以轻松的启动一个项目。开发者工具Statusfy网站： https://aceforth.com/products/statusfyGithub: https://github.com/aceforth/statusfyDemo: –License: Apache License 2.0Github stars: 1.9kStatusfy projectStatusfy 是一个完全开源的状态页面系统。Statusfy 网站是一个 Web 应用，基于 Eleventy、Vue、Nuxt.js 和 Tailwind CSS 创建。它很酷，因为：Markdown 支持；它是一个渐进式 Web 应用；多国语言支持；易于定制。在社区管理和支持方面，该项目具有社区聊天功能，大量教程、技巧、更新和博客。它还有详细的的文档。Cachet网站： https://cachethq.io/Github： https://github.com/CachetHQ/CachetDemo: https://demo.cachethq.io/License: BSD 3-Clause “New” or “Revised” LicenseGithub stars: 11.1kCachet projectCachet 是由 Vue 和Bootstrap 组成的功能强大的开源状态页面系统。它内置了 10 种语言。Cachet 与简单但功能强大的 JSON API 捆绑在一起。通过 Cachet 你可以提前安排事件。可以在信息中心内设置指标，这是一种衡量指标的方法，无论是正常运行时间，错误率还是完全随机的指标。Slack 有一个很大的社区，贡献者非常活跃。VeeValidate网站： http://vee-validate.logaretm.com/Github： https://github.com/logaretm/vee-validateDemo: –License: MITGithub stars: 7.6kVeeValidateVeeValidate 是 Vue.js 的基于模板的验证框架，使你可以验证输入并显示错误。它是基于模板的，你只需要为每个输入指定应使用哪种验证器即可。系统会使用 40 多种语言环境自动生成错误。现成的规则非常多。特性：易于设置的基于模板的验证；i18n 支持 40 多个语言环境和错误消息；支持异步和自定义规则；用 TypeScript 编写；无依赖性。VeeValidate 解决了表单验证的主要难题，并以最灵活的方式解决了它们：能够为你的用户制作复杂的 UX；最常见的验证是被内置的；跨领域验证；用于增强表格的可访问性和样式的实用工具；本地化内置在内核中。团队欢迎任何人为该项目做出贡献，并有着良好的文档和贡献指南。它还有几个很不错的例子。总结以上是为大家收集的 Vue 最有用、最完善的开源项目，希望能够对你有所帮助。推荐Vue学习资料文章：《细聊Single-Spa + Vue Cli 微前端落地指南「实践」》《通俗易懂的Vue异步更新策略及 nextTick 原理》《通俗易懂的Vue响应式原理以及依赖收集》《原生JS +Vue实现框选功能》《Vue.js轮播库热门精选》《一文带你搞懂vue/react应用中实现ssr(服务端渲染)》《Vue+CSS3 实现图片滑块效果》《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（上）》《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（下）》《vue实现一个6个输入框的验证码输入组件》《一用惊人的Vue实践技巧「值得推荐」》《Vue常见的面试知识点汇总（上）「附答案」》《Vue常见的面试知识点汇总（下）「附答案」》《Kbone原理详解与小程序技术选型》《为什么我不再用Vue，改用React？》《让Jenkins自动部署你的Vue项目「实践」》《20个免费的设计资源 UI套件背景图标CSS框架》《Deno将停止使用TypeScript，并公布五项具体理由》《前端骨架屏都是如何生成的》《Vue原来可以这样写开发效率杠杠的》《用vue简单写一个音乐播放组件「附源码」》《为什么Vue3.0不再使用defineProperty实现数据监听？》《「干货」学会这些Vue小技巧，可以早点下班和女神约会》《探索 Vue-Multiselect》《细品30张脑图带你从零开始学Vue》《Vue后台项目中遇到的技术难点以及解决方案》《手把手教你Electron + Vue实战教程（五）》《手把手教你Electron + Vue实战教程（四）》《手把手教你Electron + Vue实战教程（三）》《手把手教你Electron + Vue实战教程（二）》《手把手教你Electron + Vue实战教程（一）》《收集22种开源Vue模板和主题框架「干货」》《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》《手把手教你实现一个Vue自定义指令懒加载》《基于 Vue 和高德地图实现地图组件「实践」》《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》《是什么让我爱上了Vue.js》《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》《尤大大细说Vue3 的诞生之路「译」》《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》《大厂Code Review总结Vue开发规范经验「值得学习」》《Vue3 插件开发详解尝鲜版「值得收藏」》《带你五步学会Vue SSR》《记一次Vue3.0技术干货分享会》《Vue 3.x 如何有惊无险地快速入门「进阶篇」》《「干货」微信支付前后端流程整理(Vue+Node)》《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》《「干货」Vue+Element前端导入导出Excel》《「实践」Deno bytes 模块全解析》《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》《基于vue + element的后台管理系统解决方案》《Vue仿蘑菇街商城项目（vue+koa+mongodb）》《基于 electron-vue 开发的音乐播放器「实践」》《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》《基于 Vue 技术栈的微前端方案实践》《消息队列助你成为高薪 Node.js 工程师》《Node.js 中的 stream 模块详解》《「干货」Deno TCP Echo Server 是怎么运行的？》《「干货」了不起的 Deno 实战教程》《「干货」通俗易懂的Deno 入门教程》《Deno 正式发布，彻底弄明白和 node 的区别》《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》《深入Vue 必学高阶组件 HOC「进阶篇」》《深入学习Vue的data、computed、watch来实现最精简响应式系统》《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》《2020前端就业Vue框架篇「实践」》《详解Vue3中 router 带来了哪些变化？》《Vue项目部署及性能优化指导篇「实践」》《Vue高性能渲染大数据Tree组件「实践」》《尤大大细品VuePress搭建技术网站与个人博客「实践」》《10个Vue开发技巧「实践」》《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》《实践Vue 3.0做JSX(TSX)风格的组件开发》《一篇文章教你并列比较React.js和Vue.js的语法【实践】》《手拉手带你开启Vue3世界的鬼斧神工【实践】》《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》《怎样为你的 Vue.js 单页应用提速》《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》《Vue真是太好了 壹万多字的Vue知识点 超详细!》《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》《手把手教你深入浅出vue-cli3升级vue-cli4的方法》《Vue 3.0 Beta 和React 开发者分别杠上了》《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》《Vue3 尝鲜》《总结Vue组件的通信》《Vue 开源项目 TOP45》《2020 年，Vue 受欢迎程度是否会超过 React？》《尤雨溪：Vue 3.0的设计原则》《使用vue实现HTML页面生成图片》《实现全栈收银系统（Node+Vue）（上）》《实现全栈收银系统（Node+Vue）（下）》《vue引入原生高德地图》《Vue合理配置WebSocket并实现群聊》《多年vue项目实战经验汇总》《vue之将echart封装为组件》《基于 Vue 的两层吸顶踩坑总结》《Vue插件总结【前端开发必备】》《Vue 开发必须知道的 36 个技巧【近1W字】》《构建大型 Vue.js 项目的10条建议》《深入理解vue中的slot与slot-scope》《手把手教你Vue解析pdf(base64)转图片【实践】》《使用vue+node搭建前端异常监控系统》《推荐 8 个漂亮的 vue.js 进度条组件》《基于Vue实现拖拽升级（九宫格拖拽）》《手摸手，带你用vue撸后台 系列二(登录权限篇)》《手摸手，带你用vue撸后台 系列三(实战篇)》《前端框架用vue还是react？清晰对比两者差异》《Vue组件间通信几种方式，你用哪种？【实践】》《浅析 React / Vue 跨端渲染原理与实现》《10个Vue开发技巧助力成为更好的工程师》《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》《1W字长文+多图，带你了解vue的双向数据绑定源码实现》《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》《手把手教你D3.js 实现数据可视化极速上手到Vue应用》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》《Vue3.0权限管理实现流程【实践】》《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》作者：前端瓶子君转发链接：https://mp.weixin.qq.com/s/W8Fvn1ubcKwjo-C7LQvU7w