这些是我在处理具有大型代码库的Vue项目时开发的最佳实践。这些技巧将帮助您开发更高效、更易于维护和共享的代码。在我今年的自由职业生涯中，我有机会开发一些大型Vue应用程序。我说的这个项目有十几个Vuexstore，大量的组件（有时几百个）和很多视图（页面）。事实上，这对我来说是一次非常有益的经历，因为我发现了许多使代码可扩展的有趣模式。我还必须修复一些导致著名的意大利面条式代码困境的不良做法。所以今天，我将与您分享10个最佳实践，如果您要处理大型代码库，我建议您遵循这些最佳实践。1.使用slots让组件更容易理解和更强大它着重于插槽如何使您的组件更易于重用和更易于维护，以及为什么应该使用它们。但这与大型Vue.js项目有什么关系？一图抵千言，第一次画给你，后悔没用。有一天，我只需要创建一个弹出窗口。乍一看，没什么复杂的，只是包括标题、描述和一些按钮。所以我要做的是将所有内容都视为属性。最后，我使用了三个属性来自定义组件并在人们单击按钮时发出一个事件。很简单！然而，随着项目的不断发展，团队要求我们在其中显示许多其他新内容：表单字段、不同的按钮（取决于显示在哪个页面上）、卡片、页脚和列表。我发现，如果我继续使用props来扩展这个组件，它似乎也能正常工作。但是天哪，我错了！该组件很快变得复杂到难以理解，因为它包含无数的子组件，使用了太多的props并发出了很多事件。我遇到过一个可怕的情况，当你在某个地方进行更改时，它最终会以某种方式破坏另一个页面上的其他内容。我搞砸了科学怪人的怪物，而不是可维护的组件！但是，如果我从一开始就依赖插槽可能会更好。最后，我重构了所有内容以提供此小部件。更易于维护、更快理解和更具可扩展性！我的观点是，根据经验，由知道何时使用插槽的开发人员构建的项目确实对其未来的可维护性有很大影响。这减少了发出的事件数量，使代码更易于理解，并允许更灵活地显示您想要的任何内部组件。根据经验，请记住，当您最终在其父组件中复制子组件的属性时，应从此时开始使用插槽。2.正确组织你的Vuex存储通常，新的Vue.js开发人员开始学习Vuex是因为他们偶然发现了以下两个问题：他们要么需要访问给定的组件数据，要么他们需要在组件破坏后仍然存在的数据。就在那时，他们创建了他们的第一个Vuex商店，了解了模块，并开始在应用程序中进行组织。问题是在创建模块时没有单一的模式可以遵循。但是，我强烈建议您考虑如何组织它们。据我了解，大多数开发人员喜欢按功能组织它们。例如：验证码博客收件箱设置就我而言，我发现根据从API中提取的数据模型组织它们时更容易理解。例如：用户数TeamMessagecontentWidgetsArticles你选择哪一个由你决定。唯一要记住的是，一个组织良好的Vuexstore从长远来看将使团队更有效率。这也将使新人在加入您的团队后更容易将注意力集中在您的代码库上。3.使用操作（VuexActions）进行API调用和提交数据我的大部分API调用（如果不是全部）都是在我的Vuex操作（vuexactions）中进行的。您可能想知道：为什么这里的调用更好？仅仅是因为它们中的大多数都获取了我需要在商店（vuex商店）中提交的数据。另外，它们提供了我非常喜欢的封装和可重用性。我这样做还有其他一些原因：如果我需要在两个不同的地方（例如博客和首页）获取一篇文章的首页，那么可以使用正确的参数调用适当的调度程序。数据将被提取、提交和返回，除了调度程序调用之外没有重复的代码。如果我需要创建一些逻辑来避免在获取第一页时获取第一页，我可以在一个地方完成。除了减少服务器上的负载外，我相信它在任何地方都能正常工作。我可以在这些操作（vuex操作）中跟踪我的大部分Mixpanel事件，从而使分析代码库非常容易维护。我确实有一些应用程序，其中所有Mixpanel调用都是在操作中单独进行的。当我不必了解要跟踪什么、不跟踪什么以及何时发送时，以这种方式工作是多么令人愉快。译注：Mixpanel是一家数据追踪分析公司，可以让开发者追踪各种用户行为，比如用户浏览的页面数量、iPhone应用分析、Facebook应用交互、Email分析等。类似Firebase的埋点分析工具。4.使用mapState、mapGetters、mapMutations和mapAction简化您的代码库当您只需要访问状态/getter或调用组件内部的操作/变更时，您通常不需要创建多个计算属性或方法。使用mapState、mapGetters、mapMutations和mapActions可以帮助您缩短代码，通过分组简化复杂性，并从模块中的一个地方获取全局。//NPMimport{mapState,mapGetters,mapActions,mapMutations}from"vuex";exportdefault{computed:{//Accessingrootproperties...mapState("my_module",["property"]),//Accessinggetters...mapGetters("my_module",["property"]),//Accessingnon-rootproperties...mapState("my_module",{property:state=>state.object.nested.property})},methods:{//访问动作...mapActions("my_module",["myAction"]),//访问突变...mapMutations("my_module",["myMutation"])}};在Vuex官方文档中可以找到你需要的这些方便的助手的所有信息。5.使用API工厂我通常喜欢创建一个helper，可以在任何地方调用this.$api来获取API端点。在项目的根目录下，我有一个包含所有类的api文件夹（请参见下面的一个）。api├──auth.js├──notifications.js└──teams.js每个节点将其类别的所有端点分组。以下是我如何使用插件在Nuxt应用程序中初始化此模式（这与标准Vue应用程序中的过程非常相似）。//项目：APIimportAuthfrom“@/api/auth”；importTeamsfrom“@/api/teams”；importNotificationsfrom“@/api/notifications”；exportdefault(context,inject)=>{if(process.client){consttoken=localStorage.getItem("token");//Settokenwhendefinedif(token){context.$axios.setToken(token,"Bearer");}}//InitializeAPIrepositoriesconstrepositories={auth:Auth(context.$axios),teams:Teams(context.$axios),notifications:Notifications(context.$axios)};inject("api",repositories);};exportdefault$axios=>({忘记密码(email){return$axios.$post("/auth/password/forgot",{email});},login(email,password){return$axios.$post("/auth/login",{email,password});},logout(){return$axios.$get("/auth/logout");},register(payload){return$axios.$post("/auth/register",payload);}});现在，在我的组件中，我可以简单地执行Vuex操作，如下所示：exportdefault{methods:{onSubmit(){try{this.$api.auth.login(this.email,this.password);}catch(error){console.error(error);}}}};6.使用$config访问你的环境变量（在模板中特别有用）你的项目可能会定义一些全局配置变量：config├──development.json└──production.json我喜欢通过this.$confighelper快速访问它们，尤其是当我在模板中时与往常一样，扩展Vue对象非常容易：//NPMimportVuefrom"vue";//PROJECT:COMMONSimportdevelopmentfrom"@/config/development.json";importproductionfrom"@/config/production.json";if(process.env.NODE_ENV==="production"){Vue.prototype.$config=Object.freeze(production);}else{Vue.prototype.$config=Object.freeze(development);}7.按照约定编写commitcomments随着项目的发展，您将需要定期浏览您的组件历史记录的commits。如果您的团队不遵循相同的约定来编写他们的提交说明，那么将很难理解每个团队成员在做什么。我总是使用并推荐Angular提交消息指南。我在我从事的每个项目中都遵循它，在许多情况下，其他团队成员很快也发现遵循它更好。遵循这些准则会产生更具可读性的消息，从而在查看项目历史记录时更容易跟踪提交。简而言之，它是这样工作的：gitcommit-am"
