这是我在使用大型代码库进行Vue项目时开发的最佳实践。这些技巧将帮助您开发更有效的代码，更易于维护和共享。
今年的自由职业生涯中，我有机会从事一些大型Vue应用程序的工作。我所谈论的项目有超过12个Vuex存储，大量组件（有时数百个）和许多视图（页面）。实际上，这对我来说是非常有意义的经历，因为我发现了许多有趣的模式来使代码可扩展。我还必须修复一些导致著名的意大利面条代码难题的错误做法。
因此，今天，将与您分享10个最佳实践，如果您要处理大量的代码库，我建议您遵循这些最佳实践。
1.使用插槽（slot）使组件更易于理解并且功能更强大我最近写了一篇文章，介绍有关Vue.js中的插槽您需要了解的一些重要事项。它着重说明插槽如何使您的组件更可重用且更易于维护，以及为什么要使用它们。
但是，这与大型Vue.js项目有什么关系？一图胜千言，所以我将为您画一张图片，这是我第一次后悔不使用它们。
有一天，我只需要创建一个弹出窗口。乍一看，没有什么真正复杂的，只是包括标题，描述和一些按钮。所以我要做的就是把所有东西都当作属性。最后，我用了三个属性来定制组件，当人们单击按钮时会发出一个事件。十分简单！
但是，随着项目的不断发展，团队要求我们在其中显示许多其他新内容：表单字段，不同的按钮（取决于显示在哪个页面上），卡片，页脚和列表。我发现，如果我继续使用属性来使这个组件不断扩展，似乎也可以。但是上帝，我错了！该组件很快变得太复杂了，以至于无法理解，因为它包含了无数的子组件，使用了太多的属性并发出了大量事件。我经历了一种可怕的情况，当您在某处进行更改时，它最终以某种方式破坏了另一页上的其他内容。我搞了个科学怪人的怪物，而不是一个可维护的组件！
但是，如果我从一开始就依赖插槽，情况可能会更好。最后，我重构了所有东西以提供这个小组件。易于维护，更快地理解并且可扩展性更高！
templatedivclass="c-base-popup"divv-if="slots.header"class="c-base-popup__header"slotname="header"/divdivv-if="slots.subheader"class="c-base-popup__subheader"slotname="subheader"/divdivclass="c-base-popup__body"h1{{title}}/h1pv-if="description"{{description}}/p/divdivv-if="slots.actions"class="c-base-popup__actions"slotname="actions"/divdivv-if="slots.footer"class="c-base-popup__footer"slotname="footer"/div/div/templatescriptexportdefault{props:{description:{type:String,default:null},title:{type:String,required:true}}}/script
我的观点是，根据经验，由知道何时使用插槽的开发人员构建的项目确实对其未来的可维护性有很大的影响。这样就可以减少发出事件的次数，使代码更易于理解，并且可以在内部显示所需的任何组件时提供更大的灵活性。
作为一个经验法则，请记住，当最终在子组件的父组件中复制子组件的属性时，应该从这一点开始使用插槽。
2.正确组织您的Vuex存储通常，新的Vue.js开发人员开始学习Vuex，因为他们偶然发现了以下两个问题：
他们要么需要从树结构中实际上相距太远的另一个组件访问给定组件的数据，要么他们需要数据在组件销毁后继续存在。那是他们创建第一个Vuex存储，了解模块并开始在应用程序中进行组织的时候。
问题是创建模块时没有单一模式可以遵循。但是，我强烈建议您考虑如何组织它们。据我了解，大多数开发人员都喜欢按功能组织它们。例如：
验证码博客收件箱设定就我而言，我发现根据它们从API提取的数据模型来组织它们时更容易理解。例如：
用户数队伍留言内容小部件文章您选择哪一个取决于您。唯一要记住的是，从长远来看，组织良好的Vuex存储将使团队更具生产力。这也将使新来者更容易在加入您的团队时就将您的想法围绕您的代码库。
3.使用操作（VuexActions）进行API调用和提交数据我的大多数API调用（如果不是全部）都在我的Vuex操作（vuexactions）中进行。您可能想知道：为什么这里调用更好？
仅仅因为它们中的大多数都提取了我需要在存储（vuexstore）中提交的数据。此外，它们提供了我真正喜欢的封装性和可重用性。我这样做还有其他一些原因：
如果我需要在两个不同的地方（例如博客和首页）获取文章的首页，则可以使用正确的参数调用适当的调度程序。数据将被提取，提交和返回，除了调度程序调用外，没有重复的代码。如果我需要创建一些逻辑来避免在提取第一页时提取它，则可以在一个地方进行。除了减少服务器上的负载之外，我还有信心它可以在任何地方使用。我可以在这些操作(vuexactions)中跟踪我的大多数Mixpanel事件，从而使分析代码库真正易于维护。我确实有一些应用程序，其中所有Mixpanel调用都是在操作中单独进行的。当我不必了解跟踪什么不跟踪什么以及何时发送时，这种方式工作会给我带来有多大的快乐。译注：Mixpanel是一家数据跟踪和分析公司，允许开发者跟踪各种用户行为，比如用户浏览的页面数，iPhone应用分析，Facebook应用互动情况，以及Email分析。类似Firebase一样的埋点分析工具。
4.使用mapState，mapGetters，mapMutations和mapAction简化代码库当您只需要访问state/getter或在组件内部调用action/mutation时，通常无需创建多个计算属性或方法。使用mapState，mapGetters，mapMutations和mapActions可以帮助你缩短你的代码，通过分组来化繁为简，从你存储里模块一个地方就能掌握全局。
//NPMimport{mapState,mapGetters,mapActions,mapMutations}from"vuex";exportdefault{