如今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管理数据。其工作机制可总结为以下三个步骤：

你负责提供Markdown、JSON、YAML或CVS数据格式的内容，或从WordPress或Drupal等CMS导入内容。
内容会被转换为GraphQL层，该层负责中心化数据管理。然后你基于这些数据用Vue构建应用程序。
你将预渲染的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/

创作场景

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