众所周知，Vue.js是一个基于JavaScript的框架，近年来发展迅速。 这种增长背后有许多原因，包括框架的简单性、易于集成、客户友好性和较少的限制，这些都有助于Vue.js与Angular和React竞争。 其实Vue好像和Angular比较，在很多方面都有反应。 然而，当我搜索Vue的局限性时，我注意到每个结果中都缺乏对大型项目的支持。 在了解了VueJS之后，我可以理直气壮地说，那不是真的。 因此，在本文中，我将探索可以用来组织大型Vue.js项目的五种最佳实践。 1.使用Vue slot让你的代码容易理解父子关系是最常用的组件连接方法之一，但在某些情况下可能不是最佳选择。 想象一下，当你的一个父组件中有大量子组件时，你将不得不使用大量的道具和发射事件来解决这些子组件，不一会儿就会变得一团糟。 这正是你在大型项目中会面临的问题，而Vue.js对于这个问题有着非常好的解决方案。 Vue.js中使用Slots是为了提供另一种表达父子关系的方式。 插槽为您提供了一个将内容放置到新位置的渠道。 插槽的基本示例如下:当上述组件出现时 您可以在Vue项目中使用许多不同类型的插槽。 然而，您需要记住的最重要的事情是，当插槽增长时，它将对您的项目产生巨大的影响，并且它使您能够在整个项目中维护良好且易于理解的代码。 2.构建和共享独立的组件。遵循F.I.R.S.T的指导方针，把你的组件构建成:专用的、独立的、可重用的、小的和可测试的。 也可以使用Bit(Github)这样的工具独立控制每个项目的组件，并与Bit的组件中心共享。 共享组件与自动生成的文档和实时示例一起显示在Bit的组件中心。 它们可以用NPM安装，也可以用Bit“克隆”和修改。 这使得查找、使用和维护组件更加容易(因此，维护项目也更加容易)。 3.维护有序的Vuex StoreVuex是Vue.js中的一种状态管理模式，作为应用中所有组件的集中存储。 随着时间的推移，我看到一个关于Vuex Store的评论说，“Vuex限制开发者按需建设项目。” 但事实是，Vuex帮助开发人员使用一套指南以更有组织的方式组织他们的项目。 在了解这些原则之前，你应该了解Vuex商店的四个主要组成部分。 如果您熟悉这四个，您可以轻松地构建Vuex store:States:用于保存应用程序的数据获取器:用于以更有组织的方式访问存储外部的status对象。 突变:用于修改状态对象。 动作:用于提交突变。 假设您熟悉这四个组件，让我们看看您需要遵循的准则。 您需要将应用程序级状态集中存储在存储中。 状态应该总是通过提交突变来突变。 异步逻辑应该被封装，并且只能与动作一起使用。 如果你能遵循这三条指导方针，你的项目就能顺利构建。如果觉得存储的文件越来越大，可以完全自由的划分成独立的文件。 示例项目结构如下:3.1模块化Vuex store我们在本文中讨论的是大型项目，可以预料到这类项目中的项目文件非常庞大和复杂。 你需要用自己的方式管理店铺，你需要避免店铺的拥挤。因此，建议您以一种简单易懂的方式将您的Vuex商店模块化。 在一个项目中，没有明确的模块分解方法。有的开发人员按照功能模块化，有的按照数据模型模块化。 模块化的最终决定完全取决于你，这将有助于你和你的团队长期发展。 3.2使用助手来简化您的代码。前面我提到了Vuex store使用的四个组件。 让我们考虑这样一种情况，您需要访问这些状态、getters，或者您需要调用组件中的动作和突变。 在这种情况下，不需要创建多个计算属性或方法，可以很容易地使用辅助方法(mapState、mapGetters、mapMutations和mapActions)来减少代码。 我们来看看这四个辅助工具:mapState如果需要在一个组件中调用多个store states属性或者getter，可以使用mapState help生成一个getter函数，这样会大大减少代码行数。 MapGettersmapGetters帮助器可用于将存储getters映射到本地计算属性。 MapationsAssignments辅助函数可用于提交组件中的变化，并将组件方法映射到store.commit调用。 类似地，我们也可以使用mapMutations来传递有效载荷。 MapActions该帮助器用于调度组件中的操作，并将组件方法映射到store.dispatch调用。 4.不要忘记编写单元测试是任何项目的另一个重要方面 作为开发人员，无论项目的重要性或规模如何，我们都必须对开发的内容进行测试。 尤其是大型项目，有成千上万个小功能，我们有责任测试每个功能。 单元测试在这种情况下生效，这使得开发人员能够测试单独的代码单元。 单元测试不仅可以避免错误，还可以提高开发团队在任何时候做出更改时对工作的信心。 随着项目的发展，开发人员可以通过从一开始就遵循良好的单元测试机制来添加新功能，而不用担心破坏另一个功能。 如果我们考虑Vue.js中的单元测试，它几乎类似于所有其他框架的单元测试方法。你可以在Vue.js中轻松使用Jest、Karma或Mocha。 虽然有一个测试框架，但是在编写单元测试时，您需要记住一些一般的事情。 测试必须提供明确的错误消息ID(失败) 使用好的断言库。 (比如Jest框架内置断言库，Mocha使用柴库)编写单元测试覆盖每个Vue组件。 通过从项目开始就遵循这些步骤，随着项目结构的增长，您可以大大减少花费在调试和手动测试上的时间。 除了单元测试，Vue.js像其他框架一样支持E2E测试和集成测试。 因此，将这些融入你的项目将是一个好习惯。 一般路由部分不用单元测试，可以用端到端测试覆盖。 电子商店是最难测试的部分，推荐的方法是集成测试，因为状态、动作或收单机构的单独测试而被认为是无用的。 目前在做前台开发。如果你现在想学习前台开发技术，并且遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙:前:851中:231末:348。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 总结了以上Vue.js的技术实力，我认为Vue.js和其他框架一样，已经为大型项目做好了准备，我们可以轻松管理这些项目，不会造成混乱。 你也可能对这个问题有不同的想法或者不同的看法。 所以，请参考你在回复部分的想法。 干杯！！