谁说Vue.js不适合大型项目？4个好习惯你遵守了吗

当上述组件呈现标签时，它将被demo-content替换。您可以在Vue项目中使用许多不同类型的插槽。然而，您需要记住的最重要的事情是，当项目增长时，插槽会对您的项目产生巨大影响，并且它允许您在整个项目中维护良好、可理解的代码。2.构建和共享独立组件遵循F.I.R.S.T原则并构建您的组件：专注、独立、可重用、小型和可测试。也可以使用Bit（Github）等工具，独立控制每个项目的组件，共享到Bit的组件中心。共享组件与自动生成的文档和实例一起显示在Bit的组件中心。它们可以使用NPM安装或“克隆”并使用Bit进行修改。这使得查找、使用和维护组件变得更容易（因此，更容易维护项目）。3.维护有组织的VuexStoreVuex是Vue.js中的一种状态管理模式，充当应用程序中所有组件的集中存储。随着时间的推移，我看到有关VuexStore的评论说：“Vuex限制开发人员按照他们的意愿构建项目”。但事实是，Vuex帮助开发人员使用一组原则以更有条理的方式组织他们的项目。在理解这些原理之前，你应该先了解Vuexstore的4个主要组件。如果您熟悉这4个，您可以轻松地以更有条理的方式构建您的Vuex存储：States：用于为您的应用程序保存数据Getters：用于在存储外部访问这些状态对象。突变：用于修改状态对象。动作：用于提交突变。假设您熟悉这四个组件，让我们看看您需要遵循的原则。您需要在商店中集中存储应用程序级状态。状态应该总是通过提交突变来改变。异步逻辑应该封装起来，只和Actions一起使用。如果你能遵循这3个原则，你的项目结构就可以顺利进行，如果你觉得存储文件越来越大，你完全可以自由地将它们拆分成独立的文件。示例项目结构如下所示：├──index.html├──main.js├──api├──components└──store├──index.js├──actions.js├──mutations.js└──modules(1)模块化Vuexstore我们在本文中讨论的是大型项目，并且可以预期此类项目中的项目文件非常庞大和复杂。您需要以自己的方式管理商店，并且需要避免商店拥挤，因此建议您以易于理解的方式模块化您的Vuex商店。在一个项目中，没有确定的分解模块的方法。一些开发人员根据功能进行模块化，而另一些开发人员则根据数据模型进行模块化。关于模块化的最终决定完全取决于您，从长远来看，它将对您和您的团队有所帮助。store/├──index.js└──modules/├──module1.store.js├──module2.store.js├──module3.store.js├──module4.store.js└──module5.store.js(2)使用助手来简化你的代码前面我提到了Vuexstore中使用的4个组件。让我们考虑这样一种情况，您需要访问这些状态、getter，或者您需要调用操作、组件中的变更。在这种情况下，您不需要创建多个计算属性或方法，您可以轻松地使用辅助方法（mapState、mapGetters、mapMutations和mapActions）来减少代码。下面我们来看看这四个helper：1）mapState如果我们需要在一个组件中调用多个storestates属性或者getter，我们可以使用mapStatehelper来生成一个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辅助函数可以用来在组件和map组件方法中提交突变到store.commit调用。同样，我们也可以使用mapMutations来传递payload。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中的单元测试，它与所有其他框架的单元测试方法几乎相似，您可以轻松地在Vue.js中使用Jest、Karma或Mocha。尽管有测试框架，但在编写单元测试时需要牢记一些常规事项。测试必须提供明确的错误消息ID（失败）。使用一个好的断言库。（例如：Jest框架内置的断言库，Chai库与Mocha一起工作）编写单元测试以覆盖每个Vue组件。通过从项目开始就遵循这些步骤，随着项目结构的增长，您可以大大减少花在调试和手动测试上的时间。除了单元测试，Vue.js像其他框架一样支持端到端测试和集成测试。因此，将这些也纳入您的项目将是一个很好的做法。通常路由部分不会用单元测试来测试，可以用端到端测试来覆盖。Vuestore是最难测试的部分，推荐的方法是集成测试，因为对状态、动作或getter的单独测试被认为是无用的。总结在体验了上面Vue.js的技术能力后，感觉Vue.js和其他框架一样，已经为大型项目做好了准备，我们可以轻松管理这些项目，不会造成混乱。你也可能对这个问题有不同的想法或不同的看法。所以，请在回复部分与大家分享您的想法。干杯......！！