作为一个基于JavaScript的框架,Vue.js近年来发展迅速的原因有很多,包括框架的简单性、易集成性、用户友好性、和更少的限制。这些功能还有助于Vue.js与Angular集成,并且React具有竞争的能力。但是在搜索Vue的局限性时,发现很多人都提到了它缺乏对大型项目的支持。但在深入挖掘之后,我可以自信地说事实并非如此。因此,本文将讨论4个可用于组织大型Vue.js项目的良好实践。1.使用VueSlots让代码更容易理解父子关系是组件相互连接的最常见方式之一,但有时这可能不是最佳选择。想象一下,在一个父组件中有大量的子组件,你可能不得不使用大量的props和emit事件来处理这些子组件,一切很快就会变得一团糟。这是你在大型项目中会遇到的真实情况,然而,Vue.js可以为这个问题提供一个现场解决方案。我们可以在Vue.js中使用槽来提供另一种表示父子关系的方式。插槽提供了将内容放置在新位置的通道。slots的基本操作示例如下:
当上面组件渲染的label会被demo-content替换时:
Hi!
您可以在Vue项目中使用许多不同类型的插槽。但最重要的一点是,当插槽增加时,项目也会受到很大影响。插槽可以使整个项目中的代码保持完整和易于理解。2.构建和共享独立组件AddyOsmani:“有效构建‘大’事物的秘诀通常是避免从一开始就尝试构建大事物。相反,从更小、更集中的部分构建大事物。通过这种方式,更容易看出小事如何构成大事。》你可以遵循F.I.R.S.T原则,构建自己的组件为:专注、独立、可重用、小而可测试。你也可以使用Bit(Github)等工具为每个项目独立实现组件。源代码管理并共享它到Bit的组件中心。共享组件将与自动生成的文档和实例一起出现在Bit的组件中心。可以使用NPM安装或使用Bit和修改“克隆”,这使得查找、使用和维护组件变得更加容易(因此,更容易维护项目)Vue组件共享在Bit.dev3.维护良好的VUEX存储库Vuex是Vue.js中的一种状态管理模式,它负责应用程序中所有组件的集中存储功能。看到一些评论说:“Vuex限制了开发人员根据需要构建项目”。但事实是,Vuex可以帮助开发人员通过使用一套原则来更有条理地构建o组织他们的项目。在了解这些原理之前,你应该先了解Vuex仓库中的以下四个主要组件:States:用于保存应用程序数据Getters:用于访问仓库外的状态对象Mutations:用于修改状态对象Actions:用于处理mutations那么下面我们看看需要遵循的原则:应用层的状态需要集中在仓库中。状态应该总是通过处理突变来改变。异步逻辑应该封装起来,只能和action一起使用。遵循这三个原则,项目就可以顺利组织起来,如果觉得存储文件越来越大,可以拆分成单独的文件。示例项目结构如下:├──index.html├──main.js├──api├──components└──store├──index.js├──actions.js├──mutations.js└──modules模块化VUEX仓库图片来源:unsplash这篇文章讲的是大型项目,项目文件可能非常大很复杂。您需要以自己的方式管理存储库,并且需要避免存储存储库,因此最好以其他人易于理解的方式拥有Vuex存储库模块化。这里我们不定义项目中模块的定义,有的开发者会根据功能进行模块化,有的会根据数据模型进行模块化。关于模块化的最终决定完全取决于您,从长远来看,它将对您个人和团队有所帮助。store/├──index.js└──modules/├──module1.store.js├──module2.store.js├──module3.store.js├──module4.store.js└──module5.store.js使用helpers来简化代码Vuexstore中使用的4个组件前面提到过。假设出现需要访问这些状态、getter或需要在组件中调用操作或突变的情况,您可以轻松地使用辅助方法(mapState、mapGetters、mapMutations和mapActions)来减少代码,而无需创建多个计算属性或方法.我们来看看这四个辅助工具:(1)mapState如果需要在一个组件中调用多个存储状态属性或者getter,可以使用mapState帮助生成一个getter函数,这样会大大减少代码行数.import{mapState}from'vuex'exportdefault{computed:mapState({count:state=>state.count,countAlias:'count',countPlusLocalState(state){returnstate.count+this.localCount}})}(2)mapGettersmapGetters帮助将存储库getter映射到本地计算属性。import{mapGetters}from'vuex'exportdefault{computed:{...mapGetters(['count1','getter1',])}}(3)mapMutationsmapMutations可用于帮助提交组件中的突变,映射组件方法到store.commit调用。同样,也可以使用mapMutations传递有效负载。import{mapMutations}from'vuex'exportdefault{methods:{...mapMutations({cal:'calculate'//map`this.cal()`to`this.$store.commit('calculate')`})}}(4)mapActions可用于帮助调度组件中的动作,并将组件方法映射到store.dispatch调用。import{mapActions}from'vuex'exportdefault{methods:{...mapActions({cal:'calculate'//map`this.cal()`to`this.$store.dispatch('calculate')`})}}4。不要忘记编写单元测试测试在任何项目中都非常重要。作为开发人员,无论项目的重要性或规模如何,我们都必须测试我们开发的内容。特别是涉及到大型项目时,往往有成千上万的小功能,我们有责任测试每一个。这是单元测试的必要性,它使开发人员能够测试单个代码单元。单元测试不仅可以防止错误,而且每当开发人员进行更改时,修改的结果也会增强开发团队对其工作的信心。随着项目的进展,开发者可以从项目一开始就遵循良好的单元测试机制来添加新功能,而不用担心破坏其他功能。Vue.js中的单元测试与所有其他框架中的单元测试的工作方式大致相同,您可以轻松地将Jest、Karma或Mocha与Vue.js结合使用。尽管有测试框架,但在编写单元测试时要牢记一些一般事项:编写单元测试以覆盖每个Vue组件。测试必须为失败提供明确的错误消息ID。使用一个好的断言库。例如:Jest框架内置了一个断言库,Chai断言库与Mocha配合使用。图片来源:unsplash通过从项目一开始就遵循这些步骤,随着项目结构的发展,开发人员可以大大减少花在调试和手动测试上的时间。除了单元测试,Vue.js像其他框架一样支持端到端测试和集成测试。因此,您也可以将它们组合到项目中。通常,路由部分不使用单元测试进行测试,而是使用端到端测试进行测试。Vue存储库是最难测试的部分,状态、动作或getter的单独测试通常被认为是无用的,我推荐的方法是集成测试。看这优秀的技术能力,我觉得Vue.js非常适合大型项目,它可以轻松管理这些项目,不会造成混乱。