在为这个列表选择工具时,我们考虑了整个VueJS开发周期。从为您的新应用程序设置样板开始,我们涵盖了许多重要的应用程序概念、调试甚至测试内容。那么让我们开始吧。1.VueCLI像所有其他JavaScript框架一样,您需要CLI工具来使用Vue做很多事情。CLI允许您快速创建项目结构和部署样板。它还允许您创建实时原型来演示新功能。除了常见的特性,VueCLI还提供了很多额外的内容,比如支持一些Web开发工具,包括TypeScript、Babel、PostCSS、ESLint、单元测试、PWA和端到端测试等。它是还与社区创建的可扩展第三方插件兼容。VueCLI的另一个好处是它不需要弹出。也就是说,VueCLI比其他框架有更多的定制空间。VueCLI的图形用户界面是其最重要的功能之一,可让您轻松创建新项目并进行管理。2.NuxtJS设置VueJS之后,创建应用程序的第一步是设置一个好的样板文件,这样您就不必从头开始编写代码。样板创建有很多选择,我们在这里选择的工具是NextJS;因为它允许您创建多种类型的应用程序,例如服务器端呈现(SSR)、渐进式Web应用程序(PWA)、单页应用程序(SPA)和静态站点。Nuxt采用模块化架构,拥有50多个模块来加速您的开发过程。这些模块支持各种各样的任务,例如导入PWA、添加GoogleAnalytics或生成站点地图等。它还通过自己的包分析器实施VueJS和Node.JS最佳实践,提供开箱即用的性能调整。3.BitforVueBit是为您的团队构建下一代Vue组件库的好方法。它解决了跨存储库共享和协作UI组件的问题。这也是将UI与共享组件(独立开发、版本化和更新)相结合的有效方式。您可以在bit.dev平台中托管和组织组件。如果将组件库比作音乐专辑,Bit.dev就像iTunes。Bit.dev利用Bit的CLI工具,它允许您管理任何本地项目中的各个组件的版本,并将它们推送到Bit.dev上的集合;在此集合中,可以组织、编辑文档、呈现和安装/导入等这些组件。在Bit.dev中,您的团队可以搜索、呈现、安装甚至更新来自任何新项目的任何组件。该平台提供了许多开箱即用的功能,包括自动组件文档、渲染沙箱等。Bit的秘诀是跟踪每个组件的依赖关系并将组件作为独立的代码单元进行版本控制。它还可以在隔离环境中构建和测试共享组件,确保共享组件在将它们从本地项目导出到bit.dev中的集合之前真正可重用。了解更多:Bit.dev组件库的15大优势https://blog.bitsrc.io/15-reasons-to-build-your-component-library-in-bit-dev-93a514878863在这里查看Bitwork真正的Vue该过程的应用演示:https://blog.bitsrc.io/15-reasons-to-build-your-component-library-in-bit-dev-93a5148788634。Vue-router如果你熟悉其他JavaScript框架,那么你一定也熟悉路由的概念。路由器用于将应用程序URL映射到各个组件。Vue-router在这方面做得很好,支持基于组件的路由器配置。此外,它还支持路由器参数、查询和通配符以支持复杂的路由。相比其他框架,它提供了过渡效果等功能,使更改路线的过程更加人性化;它还提供了与活动CSS类的链接,这带来了更多的可能性。Vue-router还可以选择使用HTML5历史记录或哈希模式。这非常重要,因为它会影响用户体验,尤其是当应用程序的设计要求用户转到上一页时。5.Vuex状态管理是很多开发者头疼的一大问题。没有适当的状态控制意味着应用程序的行为可能无法预测。Vuex通过集中所有状态管理功能并只允许状态以可预测的方式发生变异,更好地解决了这个问题。Vuex允许基于状态、视图和操作的突变。状态定义有关应用程序的事实;视图向用户显示这些事实,而操作导致状态更改,重新启动突变周期。Vuex还提供了零配置时间旅行调试和状态快照导出/导入等功能。6.AxiosAxios是一个流行的第三方库,用于创建和管理ajax请求。在Vue从其存储库中fork了曾经是“官方”的ajax库“vue-resource”之后,Vue团队的首选变成了Axios。因此,Axios的流行度和使用率都增加了。并且有充分的理由。尽管Axios不是官方Vue存储库的一部分,但它很像它的前身并且是通用的,支持取消,并且具有TypeScript定义。使用Axios时需要注意的一件事是,如果您的服务器本身不支持Promises,则您需要自己提供一个polyfill。7、Vuetify顾名思义,Vuetify是“Vue”和“Beautify”这两个词的组合,它可以给你的应用程序一个漂亮的Vue体验。它是一个精心挑选的精美UI组件库,即使您不是设计师,也可以帮助您创建精美的应用程序。它提供了80多个基于MaterialDesign规范的组件,并通过其VueCLI插件提供现成的项目框架。SSR支持也是内置的。这些组件包括警报、横幅、徽章、按钮、表单输入和控件、进度小部件等。8.VueApolloGraphQL是一个多功能工具,可以利用各种API的功能。您可以使用它来查询您的应用程序或功能所需的正确数据。VueApollo是将GraphQL与Vue结合使用的最简单方法之一。Apollos组件可以以真正声明的方式使用GraphQL。Apollo的核心是为后端应用提供Schema语言,为前端应用提供查询语言,进行数据交换。它还支持SSR,因此您可以在服务器上呈现HTML。9.任何Mocha应用程序的一个重要元素就是测试。它确保应用程序满足客户的期望,并确保开发工作以适当的方式完成。测试对于使用Vue或其他JavaScript框架构建的应用程序尤为重要。虽然有很多框架可以用来执行测试,但我们选择了Mocha,因为它既可以通过Node.JS在后端运行,也可以在前端运行。这使得异步测试既方便又有意义,因为两端的流程都得到了验证。它还提供了将未捕获的异常映射到GitHub上的相关测试用例的能力,使它们更容易追踪和解决。10.Vue.jsDevTools浏览器调试对于高效的开发过程至关重要。没有好的调试工具,我们几乎无法掌握应用程序是如何运行的。除了VueJS官方推荐的调试工具,我们还可以添加其他更好的选择。Vue.jsDevTools有适用于Firefox和Chrome的插件,以及适用于任何环境的独立Electron应用程序。浏览器插件将“Vue”选项卡添加到其本机开发工具实现中,使调试体验更加流畅和用户友好。11.Vue.js官方指南的最后一篇文章也很有用,如果我们对Vue及其相关的所有优秀工具感兴趣,那么我们可以去VueJS官方指南了解更多信息:https://vuejs.org/v2/guide/本指南适用于所有当前和过去的Vue版本,因此无论您是刚刚入门还是希望改进或扩展基于旧版本Vue的现有应用程序,您都将从本指南中受益。您还可以通过版本历史轻松比较组件的变化情况。此外,该指南还内置了视频、代码片段和交互式应用程序,使其更具交互性和易懂性。本指南的最后一部分提供了与React和Angular等其他框架的详细比较。这为已经熟悉此类框架并准备迁移到Vue的开发人员提供了一条有吸引力的途径。摘要您喜欢我们总结的清单吗?我们希望本文能使您对学习Vue感兴趣,或者如果您已经熟悉Vue,则可以尝试其中的一些工具。无论您是刚刚入门还是经验丰富的开发人员,这些工具都可以使您的开发过程更加高效。正如创作者EvanYou所说:“你会爱上Vue的!”。
