2020年，11种应该加入工具箱的顶级VueJS开发员工具

全文共3283字，预计学习时长10分钟

图源：Unsplash

 

这次，小芯为大家安排上了11种顶级VueJS开发人员工具。

 

Vue JS最近越来越流行，这主要是因为它为人们学习和开发应用程序提供了便利。无论是想要使用Vue的经验丰富的开发人员还是新手，使用正确的工具都很有必要。这将有助于快速创建出色的应用程序，而不必做重复工作。

 

在为本文列表选取工具时，小芯考虑了整个Vue JS开发周期。从为新应用程序设置样板文件开始，涵盖了许多重要的应用程序概念、调试甚至测试。

 

非常值得一看，话不多说，我们速速开始~

 

图源：Unsplash

 

1. Axios

Axios是一种广受欢迎的第三方库，用于创建和管理ajax请求。将Vue曾经的“官方”ajax库“vue资源”从其存储库中分离出来之后，Vue团队的首选就是Axios。这提高了Axios的普及程度，使用人数也有所增加。

 

出现此现象的理由很充分，虽然Axios不是Vue官方存储库的一部分，但它与自己的前身十分相似，而且具有通用性，支持取消功能，拥有TypeScript定义。使用Axios的一个好处是如果服务器本身不支持承诺，用户需要自行提供子脚本。

 

2. Vue Apollo

 

 

GraphQL是一种利用API的多功能工具。它允许查询应用程序或功能所需的合适数据。VueApollo是一种将GraphQL用于Vue的最便捷方法。

 

Apollo的组件有助于以真正的声明性方式使用GraphQL。Apollo的核心是为后端应用程序提供模式语言，为前端应用程序提供查询语言，从而便于数据交换。它还支持服务器端渲染，因此HTML可以在服务器端实现渲染。

 

3. Vuex

 

 

状态管理是许多开发人员都在努力解决的重大问题。没有合理的状态控制就意味着应用程序不可预测。Vuex提供了该问题的解决方法，它集中了所有的状态管理功能，只允许状态以可预测的方式发生变化。

 

Vuex允许基于状态、视图和动作进行变化。状态明确有关应用程序的真实情况；视图将真实情况展现给用户，动作引起状态的改变，重启变化周期。

 

Vue路由器也提供诸如零配置时程分析调试以及状态快照导出或导入的功能。

 

4. Mocha

 

 

测试是应用程序的一个重要方面。它确保应用程序满足客户的期待，应用程序的开发方式得当。这对于Vue或JavaScript框架构建的应用程序来说甚至更加重要。

 

虽然有很多框架可达成此目的，但笔者选择了Mocha，原因是它可以通过Node.JS在后端运行，也可以在前端运行。在验证过程的两端时，这使得异步测试既方便又有意义。将未捕获异常映射到GitHub相关测试用例的能力让追踪和解决这些异常变得更加方便。

 

5. Nuxt JS

 

 

VueJS设置完成后，创建应用程序的第一步是设置一个好的样板文件。这将有助于避免从头开始编写代码。创建样板文件有多种选择，但本列表选择了Next JS，因为它允许创建多种类型的应用程序，比如服务器端渲染(SSR)、渐进式网络应用程序(PWA)、单页面应用程序(SPA) 以及静态网站。

 

Nuxt具有模块架构，它由50多个模块组成，可加快开发进程。这些模块支持某些任务，比如获得渐进式网络应用程序、添加谷歌分析或生成站点地图。

 

它还通过捆绑分析器实现Vue JS和Node.JS的最佳实践，从而提供了即时可用的性能调整。

 

6. Vue.js官方指南

 

 

如果人们对Vue以及它所有的出色工具感兴趣，那么Vue JS官方指南就是了解更多信息的最好选择。

 

该指南适用于Vue所有当前和历史版本，因此无论是初学者，还是想要改进或扩展基于旧版本的现有应用程序的用户，都可以从中学到很多。通过版本历史比较组件的变化也可以轻松实现。

 

此外，视频、代码段、交互式应用程序也增强了该指南的交互性，使其更易于理解。指南的最后一部分将其他框架进行了比较（比如React和Angular），十分有用。这将吸引那些熟悉此类框架的开发人员去适应Vue。

 

7. Bit for Vue

 

示例: 在bit.dev上共享的Vue组件

 

Bit是一种构建下一代Vue组件库的好方法。它解决了跨存储库共享并协调用户界面组件的问题。它也是一种将用户界面与共享组件（独立进行开发、版本控制以及更新）组合在一起的有效办法。

 

开发人员可以在bit.dev平台上托管并组织组件。如果说组件库像CD音乐专辑的话，那么Bit.dev就像iTunes。Bit.dev利用Bit的CLI工具进行版本控制，并将独立组件从本地项目中推送到Bit.dev的收藏夹中，独立组件在那里进行组织、记录、渲染，还可以进行安装或导入。

 

它也可以和React等一起使用

 

开发人员团队可以在Bit.dev上搜索、渲染、安装，甚至是更新来自新项目的组件。平台的自动组件文档、渲染沙盒等功能都是现成可用的。

 

Bit在追踪各个组件的依赖性并将其版本控制为独立的代码单元方面发挥了神奇的作用。它还可以在隔离环境中构建和测试共享组件，确保它们真正可重用，之后将它们从本地项目中导出到bit.dev的收藏夹中。

 

8. 用于浏览器的Vue.js DevTools

 

 

调试对有效的开发过程来说至关重要。没有好的调试工具，想要了解应用程序的运行情况几乎不可能。除了Vue JS推荐的官方调试工具，笔者还有什么更好的选择吗？

 

它具有适用于Firefox浏览器和Chrome浏览器的插件，以及适用于任何环境的独立电子应用程序。浏览器插件将“Vue”选项卡添加到本机开发人员工具中，从而让调试体验更加流畅、易于操作。

 

9. Vue CLI

 

 

正如JavaScript的其他框架一样，没有CLI工具便不能在Vue上做很多事情。CLI允许快速创建项目结构以及部署样板文件。它还允许创建即时原型，从而展示新功能。

 

除了常见的附属项目，Vue CLI还会对网络开发工具提供更多支持，比如TypeScript、Babel、PostCSS、ESLint、单元测试、PWA以及端到端测试。它还与社群创建可扩展的第三方插件兼容。

 

Vue CLI的另一个好处是它不需要弹出。换句话说，与其他框架相比，可以用Vue CLI做更多定制工作。Vue CLI的图形用户界面是最重要的一项功能，它允许创建新项目，管理起来也很方便。

 

10. Vuetify

 

 

顾名思义，Vuetify是“Vue”和“Beautify（美化）”两个词的组合，这正是Vuetify的功能。它是一个精美的手工制作用户界面组件库，无论用户是否是设计师，它都有助于创建精美的应用程序，。

 

Vuetify基于材料设计规范提供了80多个组件，该设计规范具有Vue CLI插件，提供了现成的项目脚手架。其中还内置了服务器端渲染支持。这些组件包括警报、横幅、徽章、按钮、表单输入和控件、进度部件等等。

 

11. Vue路由器

 

对于熟悉其他JavaScript框架的人来说，路由应该不是什么新概念。路由器用于将URL应用程序映射到组件。在这一点上，Vue路由器做的很不错，而且它支持基于组件的路由器配置。

 

此外，为允许进行复杂路由，Vue路由器还支持路由器参数、查询和通配符。和其他框架相比，过渡效果等功能让变化的路由更具吸引力，带有活跃计算机系统模拟(CSS)的链接让Vue路由器提供了更多服务。

 

Vue路由器还可以让用户在HTML5历史记录和hash模式之间进行选择。这一点至关重要，因为它会影响用户体验，尤其当应用程序要求用户导航到上一页时。

 

图源：Unsplash

 

无论是初学者还是经验丰富的开发人员，这些工具都可以让开发过程更有效率。

 

不信就来试试吧，实践出真知~

 

 

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）