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

Posted 2021-03-30 前端之巅

作者 | Ivaylo Gerchev

译者 | 王强

编辑 | Yonie

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

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

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

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

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

Vue CLI

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

Vue CLI 直接支持各种主流 Web 开发工具和技术，如 Babel、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 工具和库

• Vue DevTools 是一个很棒的浏览器扩展，用于调试 Vue 和 Vuex 应用程序。 GitHub地址: https://github.com/vuejs/vue-devtools

  小结  

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

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

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