构建和维护大型Vue.js项目的10个最佳实践_0

以下是我在处理具有大型代码库的Vue项目时开发的最佳实践。这些技巧将帮助您开发更高效、更易于维护和共享的代码。在我今年的自由职业生涯中，我有机会开发一些大型Vue应用程序。我说的这个项目有超过12个Vuex商店、很多组件（有时数百个）和很多视图（页面）。事实上，这对我来说是一次非常有益的经历，因为我发现了许多使代码可扩展的有趣模式。我还必须修复一些导致著名的意大利面条式代码困境的不良做法。:spaghetti:所以今天，我将与您分享10个最佳实践，如果您要处理大型代码库，我建议您遵循这些最佳实践。1.使用slots让组件更容易理解和更强大它着重于插槽如何使您的组件更易于重用和更易于维护，以及为什么应该使用它们。但这与大型Vue.js项目有什么关系？一图顶一千字，给你画一张，第一次后悔没用。有一天，我只需要创建一个弹出窗口。乍一看，没什么复杂的，只是包括标题、描述和一些按钮。所以我要做的是将所有内容都视为属性。最后，我使用了三个属性来自定义组件并在人们单击按钮时发出一个事件。很简单的！:sweat_smile:然而，随着项目的不断发展，团队要求我们在其中显示许多其他新内容：表单字段、不同的按钮（取决于显示在哪个页面上）、卡片、页脚和列表。我发现，如果我继续使用props来扩展这个组件，它似乎也能正常工作。但是上帝，:weary:我错了！该组件很快变得太复杂而难以理解，因为它包含无数的子组件，使用了太多的道具并发出了大量的事件。:volcano:我遇到过一个可怕的情况，当你在某处进行更改时，它最终会以某种方式破坏另一页上的其他内容。我做了一个弗兰肯斯坦的怪物而不是一个可维护的组件！但是，如果我从一开始就依赖插槽可能会更好。最后，我重构了所有内容以提供此小部件。更易于维护、更快理解和更具可扩展性！我的观点是，根据经验，知道何时使用插槽的开发人员是什么项目built确实对其未来的可维护性有很大的影响。这减少了发出的事件数量，使代码更易于理解，并允许更灵活地显示您想要的任何内部组件。:warning:根据经验，请记住，当您最终在其父组件中复制子组件的属性时，应从此时开始使用插槽。2.正确组织你的Vuex存储通常，新的Vue.js开发人员开始学习Vuex是因为他们偶然发现了以下两个问题：他们要么需要访问给定的组件数据，要么他们需要在组件破坏后仍然存在的数据。就在那时，他们创建了他们的第一个Vuex商店，了解了模块，并开始在应用程序中进行组织。:bulb:问题是在创建模块时没有单一的模式可以遵循。但是，:point_up_2|type_3:我强烈建议您考虑如何组织它们。据我了解，大多数开发人员喜欢按功能组织它们。例如：验证码博客收件箱设置就我而言，我发现根据从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);};JavaScript导出默认$axios=>({forgotPassword(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",有效载荷);}});javascript现在，我可以简单地在我的组件或Vuex操作中调用它们，如下所示：exportdefault{methods:{onSubmit(){try{this.$api.auth.login(this.email,this.password);}catch(error){console.error(error);}}}};JavaScript6。使用$config访问你的环境变量（在模板中特别有用）你的项目可能在某些文件中定义了一些全局配置变量：config├──development.json└──production.json我喜欢通过快速访问它们this.$config助手，尤其是当我在模板中像往常一样扩展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.按照惯例编写提交注释随着项目的发展，你需要定期浏览组件的提交历史.如果您的团队不遵循相同的约定来编写他们的提交说明，那么将很难理解每个团队成员在做什么。我总是使用并推荐Angular提交消息指南。我在我从事的每个项目中都遵循它，在许多情况下，其他团队成员很快也发现遵循它更好。遵循这些准则会产生更具可读性的消息，从而在查看项目历史记录时更容易跟踪提交。简而言之，它是这样工作的：gitcommit-am"():"#Hereearesomesamplesgitcommit-am"docs(changelog):updatechangelogtobeta.5"gitcommit-am"fix(release):needtodependonlatestrxjsandzone.js”查看他们的README文件以获得更多约定。8.我知道在制作项目时始终冻结包的版本...所有包都应遵循语义版本控制规则。但事实是，其中一些并非如此。:sweat_smile:为了避免在半夜醒来时发现你的一个依赖项并破坏你的整个项目，版本锁定你所有的包可以减轻你早上的工作压力。:innocent:其含义很简单：避免使用以^开头的版本：{"name":"myproject","version":"1.0.0","private":true,"dependencies":{"axios":"0.19.0","imagemin-mozjpeg":"8.0.0","imagemin-pngquant":"8.0.0","imagemin-svgo":"7.0.0","nuxt":"2.8.1",},"devDependencies":{"autoprefixer":"9.6.1","babel-eslint":"10.0.2","eslint":"6.1.0","eslint-friendly-formatter":"4.0.1","eslint-loader":"2.2.1","eslint-plugin-vue":"5.2.3"}}9。显示大量数据时使用Vue虚拟滚动条你可能已经注意到，当页面显示很多行或需要遍历大量数据时，页面呈现速度很快。为了解决这个问题，可以使用vue-virtual-scoller。npminstallvue-virtual-scroller只会渲染列表中可见的项目，并重用组件和dom元素，使其尽可能高效。真的好用又流畅！：火花：的HTML10。跟踪第三方包的大小当很多人在做同一个项目时，如果没有人注意他们，那么安装的软件包的数量会迅速增加到令人难以置信的地步。为避免降低您的应用程序速度（尤其是在移动网络速度较慢的情况下），我在VisualStudioCode中使用了导入收费包。这样，我可以直接从编辑器中看到导入的库有多大，并且可以看到导入的库太大时出了什么问题。例如，在最近的一个项目中，导入了整个lodash库（压缩后大约24kB）。问题是项目中只使用了cloneDeep的一个方法。在导入收费包中发现此问题后，我们通过以下方式解决了它：npmremovelodashnpminstalllodash.clonedeep然后可以在需要的地方导入clonedeep函数：JavaScript为了进一步优化，您还可以使用TheWebpackBundleAnalyzer包以交互式可缩放树图可视化Webpack输出文件的大小。在处理大型Vue代码库时，您还有其他最佳实践吗？请在下面的评论中告诉我，或在Twitter@RifkiNada上与我联系。关于作者NadaRifkiNada是一名JavaScript开发人员，他喜欢使用UI组件创建具有出色UX的界面。她专攻Vue.js，喜欢分享任何可以帮助她的前端Web开发人员的东西。Nada还涉足数字营销、舞蹈和中文。