vue github开源项目_9 个优秀的 VUE 开源项目,这一次让你彻底搞懂 VUE

af148a23a6460ac4ca4cfd6233fa9b22.png

Vue开源项目

下面汇总了一些非常流行的工具和库,并包括在 Vue 生态系统中所涉及到的其他库和插件。

是根据其有用性、有效性、文档、思想和贡献指南进行选择的。

UI组件

Vuetify

网站: https://vuetifyjs.com/en/Github: https://github.com/vuetifyjs/vuetifyDemo: –License: MITGithub stars: 25.6k

1b845aa4da0b970be821fb472d6a6221.png

Vuetify project

Vuetify 根据材料设计规范提供了大量的精制组件(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.6k

2b40b0f479e8bc3e81408994a14bf864.png

Buefy logo

Buefy 为基于 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.8k

3bb23caf225b61661640799727edbca8.png

Vue Material project

Vue 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.4k

d8356b401abd0dfa736a8297ed036c70.png

Nuxt.js logo

Nuxt 是一个简单而直接的框架,用于构建通用程序,例如:服务器端渲染的应用,单页应用,渐进式 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.8k

f2a3f2566b06e39ae267635422b88ae7.png

Quasar framework

Quasar 是一个基于 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.5k

4949177e12b58000334aeebcf2bd3449.png

Bootstrap Vue logo

Bootstrap 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.9k

9eedda316b4d173d7d8609c6d9cc297e.png

Statusfy project

Statusfy 是一个完全开源的状态页面系统。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.1k

962d4397f9ba653e3ecbd9d69d7d3f6a.png

Cachet project

Cachet 是由 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.6k

2ad8776023450e3529eb920d98ad9f4c.png

VeeValidate

VeeValidate 是 Vue.js 的基于模板的验证框架,使你可以验证输入并显示错误。

它是基于模板的,你只需要为每个输入指定应使用哪种验证器即可。系统会使用 40 多种语言环境自动生成错误。现成的规则非常多。

特性:

  • 易于设置的基于模板的验证;

  • i18n 支持 40 多个语言环境和错误消息;

  • 支持异步和自定义规则;

  • 用 TypeScript 编写;

  • 无依赖性。

VeeValidate 解决了表单验证的主要难题,并以最灵活的方式解决了它们:

  • 能够为你的用户制作复杂的 UX;

  • 最常见的验证是被内置的;

  • 跨领域验证;

  • 用于增强表格的可访问性和样式的实用工具;

  • 本地化内置在内核中。

团队欢迎任何人为该项目做出贡献,并有着良好的文档和贡献指南。它还有几个很不错的例子。

—— 推 荐  阅 读 ——

爽!4款珍藏很久的看片网站,高清随意看北大最神博士论文:为什么学校打印店老板大多是湖南人?北京海淀某互联网公司老板,白嫖只给一个鸡腿!卧槽!微信居然有“隐身功能”了!我对呼喊“嫁人要嫁程序员”这类口号的女孩,不是很有好感。

重磅!前端开发 交流群已成立

「为了解决前端开发之痛——散点自学+基础不牢+遇到问题无人解答,」

更为了让你少掉两根头发,多认识几个道友,黔在在创建了一个「前端开发 交流群」,更好的跟大家一起学习交流,大家一起进步,一起成为更好的自己。

有兴趣入群的同学,可长按扫描下方二维码,或添加微信号 「「guojiang421」」

5e99778a5709a7eef04ef15a0b59fe85.png

「一定要备注:」 城市+昵称+技术方向,根据格式备注,可更快被通过且邀请进群

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值