十款热门的Vue.js工具和库

众所周知，Vue目前愈来愈热门，被不少开发人员采用，所以其生态也愈来愈完善，相关的工具和库也很丰富。这主要得益于：Vue的学习曲线，清晰的设计结构和使用文档，让有经验的开发人员从其余框架（React和Angular）很方便的入手。今天的这篇文章笔者从这些工具的实用性、有效性、独特性选了这十款工具和库，而不是依据Github受欢迎程度或星级，有些你已经很熟悉了并在使用，有些还比较陌生，好了，让我来一块儿看下这十款热门的工具和库。

一、Vue CLI

和其余前端框架同样，为了方便开发者快速上手，都提供CLI相似的脚手架工具。Vue CLI是一套功能齐全的工具，可用于快速Vue开发。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各类构建工具可以基于智能的默认配置便可平稳衔接，这样你能够专一在撰写应用上，而没必要花好几天去纠结配置的问题。好比你能在项目中很轻松的集成相似Babel，TypeScript，ESLint，PostCSS，PWA，Jest，Mocha，Cypress和Nightwatch等这些插件。

二、VuePress

VuePress是以Vue驱动的静态网站生成器，是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中，你可使用Markdown编写文档，而后生成网页，每个由VuePress生成的页面都带有预渲染好的HTML，也所以具备很是好的加载性能和搜索引擎优化。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用，其余的页面则会只在用户浏览到的时候才按需加载。

官方地址：https://v1.vuepress.vuejs.org/

三、Gridsome

Gridsome相似VuePress，但不彻底相同，它也是使用开发人员喜好的最新网络技术工具构建网站 - Vue.js，GraphQL和Webpack。 得到热从新加载和Node.js的全部功能。 Gridsome让搭建筑网站再次变得有趣。若是你想建个博客站，能够考虑下。 其特色以下：

• 使用Vue.js，webpack和Node.js等现代工具构建网站。
• 使用任何CMS或数据源获取内容。从WordPress，Contentful，本地Markdown或任何其余无头CMS或API中提取数据。
• 首先只加载关键的HTML，CSS和JavaScript。而后预取下一页，以便用户能够很是快速地点击，而无需从新加载页面，即便在离线时也是如此。
• Gridsome使用超快速静态站点生成器，JavaScript和API的强大功能来建立使人惊叹的动态Web体验。
• Gridsome站点一般不链接到任何数据库，而且能够彻底托管在全局CDN上。它能够处理数千到数百万次点击，而且不须要昂贵的服务器成本。

官方地址：https://gridsome.org/

四、Vuex

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，我的的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据以后，你能够在所在项目中的任何一个组件里进行获取、进行修改，而且你的修改能够获得全局的响应变动。每个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。store包含四个部分：

• state – 应用的数据内容对象
• getters – 定义相关方法获取state中的数据
• mutations – 定义的相关方法操做state中的数据
• actions – Action 相似于 mutation，不一样在于：Action 提交的是 mutation，而不是直接变动状态；Action 能够包含任意异步操做。

官方网址：https://vuex.vuejs.org/

五、 Nuxt

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来建立服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具备优雅的代码结构分层和热加载等特性。

其官方地址：https://nuxtjs.org/

六、Vuetify

Vuetify目前是基于vue的最好的UI组件库之一。它提供了大量基于Material Design规范精心制做的组件（80+），足以知足任何应用程序的需求。

您可使用它来构建SSR应用程序，SPA，PWA和移动应用程序。全部Vuetify组件都有很好的文档说明，并提供了清晰的示例。

官方网址：https://vuetifyjs.com/en/

七、Quasar

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员建立：

• 响应式网站
• PWA（Progressive Web App）
• 经过Apache Cordova构建移动APP（Android，iOS，…）
• 多平台桌面应用程序（使用Electron）

Quasar容许开发人员编写一次代码，而后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最早进的CLI设计应用程序，并提供精心编写，速度很是快的Quasar Web组件。

当使用Quasar时，你不须要加载像Hammerjs，Momentjs或Bootstrap这样额外的库。它拥有这些功能，并且体积很小！

官方网址：https://quasar.dev/

八、Storybook

对于前端开发来讲，组件化技术已是一门必修课了，这其中又主要以 react 和 vue 为主。但平时在开发组件，尤为是公共组件或者第三方组件库的时候，每每会有一些困扰：

• 不能很好的管理多个组件，尤为是在组件预览的时候，不能一目了然
• 在组件预览的时候，也不能很好的反应一个组件的多个不一样状态
• 自动化交互测试可使用 enzyme，但不少时候还得手动测试，就比较麻烦了
• 在写文档的时候，须要将组件预览和文档写在一块儿，并须要切换到不一样的状态，就比较吃力了

因此，storybook 就是为了解决这些问题而出现的，它为你的组件搭建了一个强大的开发环境，主要提供了如下的几个功能：

• 提供了一个强大的 UI 组件管理页面，能够很便捷、清晰的分组、管理多个组件或一个组件的多个不一样状态
• 在自动化交互测试以外，能够很方便的进行手动交互测试，而且能够动态改变组件参数，查看视图变化
• 能够将组件预览导出为静态资源，这样就能够很方便查看组件的文档和不一样参数对应的不一样视图
• 还有一系列的插件，提供了不少额外的功能，帮助你更好的开发、测试、优化组件

该工具使开发人员可以独立于主应用程序建立组件，并在隔离的开发环境中以交互方式展现它们，而无需担忧特定于应用程序的依赖关系和要求。方便开发人员、产品经理、设计人员等多人参与到项目中。

官方网址：https://storybook.js.org/

九、Vue Apollo

最近有不少关于GraphQL的讨论。所以，若是您已经熟悉它并但愿将其与Vue集成，那么您应该尝试Vue Apollo。这个库能很方便的将Vue和GraphQL集成。

官方网址：https://vue-apollo.netlify.com/

十、Eagle.js

Eagle.js 是一个基于 Vue.js Web 框架构建的幻灯片系统。它支持动画、主题、互动小部件（用于网络演示），而且能够轻松地在演示文稿之间重用组件、幻灯片和样式。

官方网址：https://github.com/zulko/eagle.js/

小节

今天的内容就到这里，但愿你能找到心意的工具和库，若是你有好的工具和库推荐，欢迎你在留言区进行分享。

更多精彩内容，请微信关注“前端达人”公众号！