10 个实用的 Vue.js 工具和库

更新日期: 2019-08-07阅读: 2.4k标签: 

如今 vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架(如 reactangular)切换过来。

只要你认真对待 Vue 的开发工作,逐渐就会发现很多优秀的基础工具和库。这些工具将点亮你的 Vue 开发职业生涯,让你浑身上下散发专业气息。

本文总结了一些最值得关注的工具和库,相信你迟早会用在自己的 Vue.js 项目中。同类文章经常只会列举一些 UI 组件库,而本文涉及的范围更广,探讨了 Vue 生态系统中的一系列工具、库和插件。

我的选择是基于实用性、有效性和独特性等原则——而不是它们的 GitHub 受欢迎程度或星级评分。

闲话不提,我们先来看 Top10。


Vue CLI

似乎现在每款 JavaScript 应用程序框架都必须使用某种 CLI 工具,Vue 也不例外。Vue CLI 是针对快节奏 Vue 开发打造的一套功能齐全的工具。除了常见的项目骨架之外,它还有方便的即时原型制作功能,你无需创建完整项目就可以尝试新的创意。

Vue CLI 直接支持各种主流 Web 开发工具和技术,如 Ba​​bel、TypeScript、ESLint、Postcss、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。这主要归功于它的可扩展插件系统。这意味着社区可以构建和共享可复用的插件以满足常见需求。

Vue CLI 强大的 GUI(Vue UI,它随 CLI 一起提供)则为其锦上添花。在其帮助下你可以轻松创建并直接配置和管理项目。

VueCLI( https://cli.vuejs.org/ )


VuePress

VuePress 是 Vue 生态系统中的另一大重头戏。它是一个基于 Vue 的静态站点生成器,最初是用来编写技术文档的工具,现在则发展成为一个小巧、紧凑、功能强大的无头 CMS。从版本 1.x 开始,它提供了出色的博客功能和强大的插件系统。它有一个默认主题(适用于技术文档),但你也可以构建自定义主题或使用社区中的预制主题。

在 VuePress 中,你使用 Markdown 编写内容,然后将其转换为预渲染的静态 html 文件。这些文件加载完毕后,你的站点就成为了由 Vue、Vue Router 和 webpack 支持的单页应用程序。

VuePress 的一大好处就是你可以在 Markdown 文件中包含 Vue 代码或组件,带来了强大的功能和灵活性。你可以像开发普通的 Vue 应用程序一样开发你的网站,并充分利用 Vue 应用的种种优势。

VuePress( https://v1.vuepress.vuejs.org/ )


Gridsome

Gridsome 与 VuePress 有许多相似之处,但前者在处理数据源时采用了另一种非常强大的方法。你可以用它在应用程序中连接和使用许多不同类型的数据,然后将这些数据统一到一个 GraphQL 层中。基本上来说,Gridsome 用 Vue 提供前端功能,并使用 GraphQL 管理数据。其工作机制可总结为以下三个步骤:

  1. 你负责提供 Markdown、JSON、YAML 或 CVS 数据格式的内容,或从 WordPress 或 Drupal 等 CMS 导入内容。

  2. 内容会被转换为 GraphQL 层,该层负责中心化数据管理。然后你基于这些数据用 Vue 构建应用程序。

  3. 你将预渲染的 HTML 文件部署到静态 Web 主机或 CDN 上,如 Netlify、Amazon S3、 Now.sh 、Surge.sh 等。

Gridsome 提供了一些开箱即用的最佳实践,如代码分割、资产优化、渐进式图像和链接预取等。所以 Gridsome 用起来很快,而且对 PWA 支持完善,对 seo 也很友好。

Gridsome( https://gridsome.org/ )


Vuex

开发人员构建 Web 应用程序时面对的一大问题就是状态管理。为了解决这个问题,Vue 提供了一个状态管理系统——Vuex。它负责集中存储应用程序中的所有组件,确保状态只能以可预测的方式变化。一个存储区是一个特殊的对象,分为四个部分:

  • state- 存储应用数据的对象。

  • getter- 包含用来抽象状态访问的方法的对象。

  • mutation- 包含直接影响状态的方法的对象。

  • action- 包含用来触发突变和执行异步代码的方法的对象。

存储区也可以分割为多个模块以提高可维护性。

Vuex( https://vuex.vuejs.org/ )


Nuxt

Nuxt 是常用的服务端渲染(SSR)方法。这个框架简洁而直观,可用来构建各种应用程序。它也是模块化的,因此你可以只使用应用程序所需的那些模块。

你可以使用 Nuxt 创建服务端渲染的应用程序(SSR)、单页面应用程序(SPA)、渐进式 Web 应用(PWA),或者只用作作静态站点生成器。

简而言之,Nuxt 简化了构建和优化应用程序的流程,为你提供简洁而愉快的开发体验。

Nuxt( https://nuxtjs.org/ )


Vuetify

Vuetify 是最好用的 UI 组件库之一。它提供了大量基于 Material Design 规范精心制作的组件(80+),足以满足任何应用程序的需求。

你可以用它来构建 SSR 应用程序、SPA、PWA 和移动应用。你可以创建新应用或将它们添加到现有应用中。它有免费和付费版主题可选,你也可以构建自己的主题。它还提供了一个系统,让你可以只选出要用的组件,从而大大减少应用程序的最终大小。

所有 Vuetify 组件都附带完善的文档,并提供了清楚的示例。

Vuetify( https://vuetifyjs.com/en/ )


Quasar

Quasar 是 Java“一次编写,随处运行”哲学的 JavaScript 版本。它是一个通用的,基于 Vue 的框架,让你可以使用相同的代码库为不同的平台编写应用程序。SPA、PWA、SSR 应用、混合移动应用或多平台桌面应用,任君选择!

它带有出色的文档和大批兼顾性能和响应性的组件。Quasar 自带许多最佳实践(HTML/CSS/JS 压缩、缓存清除、tree-shaking、源映射、代码分割与懒加载、ES6 转换、代码 linting、可访问性等),因此你可以专注于应用程序的功能实现。它还提供了一个用来轻松搭建新项目的 CLI 工具。

Quasar( https://quasar.dev/ )


Storybook

Vue 是一个主要基于组件的框架,因此编写优秀、高效的组件对所有开发人员来说都很重要,而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔离的环境中开发、管理和测试 UI 组件。它使开发人员能够独立于主应用程序创建组件,并在隔离的开发环境中以交互方式展示它们,而无需担心特定于应用程序的依赖关系和需求。

Storybook 提供了大量的附加组件和灵活的 api,可根据需要自定义你的 storybook。你还可以导出为静态 Web 应用程序,并将项目部署到 HTTP 服务器上。

Storybook( https://storybook.js.org/ )


Vue Apollo

最近有很多关于 GraphQL 的讨论。如果你很熟悉它,希望将其集成到 Vue 中,那么可以试试 Vue Apollo。这个库是连接 Vue 和 GraphQL/Apollo 的一座桥梁,用起来顺畅愉快。

VueApollo( https://vue-apollo.netlify.com/ )


Eagle.js

Eagle.js 是一个使用 Vue 构建的功能强大、灵活且独特的幻灯片系统。你可以在演示中创建易复用的组件、幻灯片和样式。它还支持动画、主题和交互式小部件,非常适合制作网络演示内容。Eagle.js 有一个简单且可调整的 API,因此你可以自由地制作所需的幻灯片。

这个库最方便的一项功能之一是将一张幻灯片放在单独的一个文件中,然后就能在其他幻灯片中重复使用了。你还可以将特定演示文档中的幻灯片导入另一个文档里。在这样强大的工具帮助下,你就可以制作复杂、可交互且吸引人的演示文稿。

Eagle.js( https://github.com/zulko/eagle.js/ )


另外 5 款值得关注的 Vue 工具和库

小结

现在有了这么多工具,你就可以构建一些精彩的项目了:网站、应用程序、库、插件……能做的事情还不止这些。去做出一些优秀的作品吧!

我个人的知识见闻自然是有限的,我可能会漏掉一些优秀的工具和库,所以还有哪些出色的产品就请在评论里推荐吧。

英文原文: https://www.sitepoint.com/vue-js-tools-libraries/


链接: https://fly63.com/article/detial/4610

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。

15个有趣的Javascript 和CSS库

让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit

math.js_灵活强大的JavaScript数学库

math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。

12 个评估 JS 库你需要关心的事

当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势

在使用新的JavaScript库时需要考虑的12件事

对于今年的JavaScript状态调查,我想深入挖掘一下,不仅知道人们正在使用哪些工具和库,还要为什么他们选择使用它们。这意味着我必须找到一种方法将个人偏好转化为冷酷的数据。

React Native 常用的 15 个库

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

10个有趣的javascript和css库

我们的使命是让您了解最新和最酷的Web开发趋势。下面为大家分享10个有趣的javascript和css库:Tessaract.js强大的javascript(节点和浏览器)库,用于从图像中提取文本。

5个功能丰富的交互式Js库

在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。在本文中,我们选择了一些最佳的javascript库汇总

Js常用的动态效果库有那些?

当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。经过一番研究,我收集了 11 个最好的库,你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库

功能强大的 JS 文件上传库:FilePond

FilePond 是一款很轻便的上传插件。并没有太多繁琐的配置,这里我并没有逐一针对每个插件引入进行演示,只展示了常用的部分。留意上面提示的坑,掌握上面讲解的方法,其它的插件你便可自行学习

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!