阅读 1721

10个相见恨晚的vue.js库!用好了,事半功倍!

  Vue 结合了 React 和 Angular 的优点,并且有着团结、活跃且庞大的社区,可以帮助解决开发中遇到的问题。开源社区不断提出解决问题的新方法。工具和库的数量也贡献量不断的增加。

  • **该框架非常小。**约为18–21KB;
  • Vue 支持用基于组件的方法来构建 Web 应用
  • 详细的文档。这对于初学者来说很容易上手;
  • **易于理解。**由于其结构简单,你可以轻松地把 Vue.js 添加到自己的 Web 项目里。它凭借定义良好的体系结构来保存你的数据。生命周期方法和自定义方法是分开的;
  • **轻松的集成。**你可以通过 CDN 来轻松添加 Vue.js,不依赖 Node.js 和 npm 环境就可以用。完全可以把它当成替代 jQuery 的绝佳选择;
  • 出色的工具。 通过 Vue CLI ,你可以使用内置的路由、状态存储、Lint、单元测试、CSS预处理器、Typescript、PWA 等来启动新项目。此外,Vue CLI 还提供了用于管理项目的UI。

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

1.ViewUI

  View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

image-20201222113902769

image-20201222113726456

2.Vue.js Modal

  Vue.js 模态框(Modal)是一个易用、高度可定制化的Vue.js模态框组件库,支持SSR。

image-20201222114057027

3.Mint UI

  Mint UI 由饿了么前端团队推出的 Mint UI,是一个基于 Vue.js 的移动端组件库。Mint-UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

未标题-1

4.Vuetify

  一款非常精致的UI框架,它提供了很多常用的组件,依靠Material Design的设计优势,让你无需编写一行css代码就可以得到非常美观的界面功能。

image-20201216124241755

5.Buefy

  Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。

特性:

  • 使得你目前的 Bulma 主题/变量很简单
  • 支持材质设计图标和 FontAwesome
  • 除了 Vue&Bulma 以外,没有任何内部依赖关系
  • 约60KB min + gzip(含 Bulma)
  • 语义代码输出
  • 遵循 Bulma 设计和一些 Material Design UX
  • 关注可用性和性能,而不是过度动画

img

6.Vue Material

  Vue Material 简单、轻巧,并且完全按照 Google Material Design 规范构建。Vue Material 提供了超过 56个组件来构建不同类型的布局。Material Design Framework 拥有真正完整的文档。该框架非常轻巧,具有完全符合Google Material Design 指南的所有组件。这种设计并支持所有的现代浏览器适合所有的屏幕。

img

7.Nuxt.js

  Nuxt 是一个简单而直接的框架,用于构建通用程序,例如:服务器端渲染的应用,单页应用,渐进式 Web 应用,或只是把它用作静态站点生成器。它也是模块化的,所以你只需使用程序所需的那些模块即可。Nuxt 使你不必纠结于构建和优化程序的工作。Nuxt.js 具有模块化架构,有50多个模块可供选择。

特征:

  • 自动转译和打包(通过 webpack 和 babel);
  • 代码热加载;
  • 可以选择服务器端渲染、单页应用程序或静态生成;
  • 可通过 nuxt.config.js 文件进行配置;
  • 为每个页面的页代码进行拆分;
  • 带有 layouts/目录的自定义布局;
  • 仅加载关键的CSS(页面级)。

  Nuxt 成为 Vue 开发不可或缺的一部分,有许多贡献者和广泛的社区。

img

8.Quasar

  Quasar 是一个基于 Vue 的通用框架,可让你用相同的代码库为不同平台编写应用程序:SPA,PWA,SSR 应用,混合移动应用或多平台桌面应用。Quasar 包含多达 81 个组件。

  这里有大量的文档和的组件,这些组件在设计时都考虑了性能和响应能力。Quasar 默认情况下集成了最佳做法(HTML/CSS/JS最小化、缓存清除、tree shaking,源映射、带有延迟加载的代码拆分、ES6 生成,code-splitting、可访问性等),所以你只需要把经历放在程序的功能上。它还提供了一个 CLI 工具,用于轻松构建新的项目。

img

9.Bootstrap Vue

  Bootstrap Vue 是基于 Bootstrap 库的 UI 套件。它只是用 Vue 代码替换了常规的 Bootstrap 组件中的JavaScript。借助 Bootstrap Vue,你可以使用 Vue.js 和世界上最受欢迎的前端 CSS 库——Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。它还可以轻松地与 Nuxt.js 集成。

  文档内容丰富,加上强大的社区支持,这使你可以轻松的启动一个项目。

opt_badp_thumbnail

10.Statusfy

  Statusfy 是一个完全开源的状态页面系统。Statusfy 网站是一个 Web 应用,基于 Eleventy、Vue、Nuxt.js 和 Tailwind CSS 创建。

它很酷,因为:

  • Markdown 支持;
  • 它是一个渐进式 Web 应用;
  • 多国语言支持;
  • 易于定制。

  在社区管理和支持方面,该项目具有社区聊天功能,大量教程、技巧、更新和博客。它还有详细的的文档。

img

结尾

本期就分享到这里,我是小编南风吹,专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源! 希望能与大家共同学习交流,欢迎关注我的公众号**【Github导航站】**。

111

往期推荐

3000多人访问一个html文件,多少宽带才足够支撑

程序员接私活必备后台框架,不用重复造轮子,网友:太好用了!

还在从头到尾撸项目?这6个SpringBoot项目用好了,事半功倍!

厉害了,这款程序员代码补全工具,让你的编程效率飞起来!

「00后缩写黑话翻译器」登上GitHub热榜,中年网民终于能看懂年轻人的awsl

太酷了!这款开源安卓投屏软件,让你工作游戏两不误!

文章分类
前端
文章标签