家喻户晓，Vue.js是一个基于JavaScript的框架，在最近几年中倒退迅速。

这种增长背地的起因很多，包含框架的简略性，易于集成，用户敌对性，较少的限度，这些起因曾经帮忙Vue.js与Angular和React竞争。实际上，Vue在许多方面仿佛都与Angular和React等量齐观。

然而，当我搜寻Vue的局限性时，我留神到在每个后果中都呈现了对大型项目不足反对的状况。理解VueJS后，我能够自信地说那不是事实。

因而，在本文中，我将探讨5种最佳实际，可用于组织大型Vue.js我的项目。

1.应用Vue插槽使你的代码易于了解

父子关系是组件之间相互连接的最罕用办法之一，但这在某些状况下可能不是最佳抉择。设想一下，当你在一个父组件中领有大量的子组件时，你将不得不应用大量的 props 和 emit 事件来解决这些子组件，这将在短时间内变得一团糟。这正是你在大型项目中会面临的状况，而Vue.js对这个问题也有一个很到位的解决方案。

Vue.js中应用了插槽（Slots），以提供示意父子关系的另一种办法。插槽为你提供了将内容搁置在新地位的渠道。插槽的根本示例如下所示：

<div class="demo-content">   <slot></slot></div>

当下面的组件呈现出 <slot></slot> 标签时，将被demo-content替换。

你能够在Vue我的项目中应用多种不同类型的插槽。然而，你须要记住的最重要的事件是，插槽在增长时会对你的我的项目产生微小的影响，它使你能够在整个我的项目中保护良好的，易于了解的代码。

2.建设并共享独立的组件

遵循F.I.R.S.T准则，将您的组件构建为：专一，独立，可重用，小型且可测试。你还能够应用Bit（Github）之类的工具独立管制每个我的项目的组件，并将其共享给Bit的组件核心。

共享的组件与主动生成的文档和实时示例一起显示在Bit的组件核心上。它们能够应用NPM进行装置或“克隆”并应用Bit进行批改。这使得查找，应用和保护组件变得更加容易（因而，更易于保护我的项目）。

3.维持一个颠三倒四的Vuex Store

Vuex是Vue.js中的状态管理模式，它充当应用程序中所有组件的集中存储。随着工夫的流逝，我看到无关Vuex Store的评论说：“ Vuex限度了开发人员依据须要结构我的项目”。但事实是，Vuex帮忙开发人员应用一套准则以一种更有组织的形式组织他们的我的项目。

在理解这些原理之前，您应该理解Vuex store的4个次要组件。如果你相熟这4个，则能够轻松地以更有条理的形式构建Vuex store：

  1. States: 用于保留您的应用程序的数据
  2. Getters：用于拜访store内部的这些状态对象。
  3. Mutations：用于批改状态对象。
  4. Actions：用于提交渐变。

假如你相熟这四个组成部分，让咱们看看你须要遵循的准则。

  1. 你须要将应用程序级状态集中存储在store中。
  2. 状态应该总是通过提交mutations而产生渐变。
  3. 异步逻辑应该被封装，并且只能与Action一起应用。

如果你能遵循这3个准则，你的我的项目就能够顺利地进行结构化，如果你感觉存储文件越来越大，你能够齐全自在地将它们宰割成独立的文件。示例我的项目构造如下所示：

├── index.html├── main.js├── api├── components└── store    ├── index.js              ├── actions.js    ├── mutations.js    └── modules

3.1模块化Vuex store

咱们在本文中探讨的是大型项目，并且能够预期此类我的项目中的我的项目文件十分大而简单。你须要以本人的形式治理store，并且须要防止store拥挤，因而，倡议你以易于了解的形式对你的Vuex store进行模块化。在一个我的项目中，没有确定的模块合成形式，有的开发人员依据性能进行模块化，而有的开发人员则依据数据模型进行模块化。对于模块化的最终决定齐全取决于你，这将有助于你和你的团队的长期倒退。

store/   ├── index.js    └── modules/       ├── module1.store.js       ├── module2.store.js       ├── module3.store.js       ├── module4.store.js       └── module5.store.js

3.2 应用助手来简化你的代码

在后面我提到了Vuex store中应用的4个组件。让咱们思考一种状况，即你须要拜访这些states、getters，或者你须要调用组件中的action、mutations。在这种状况下，你不须要创立多个计算属性或办法，你能够很容易地应用辅助办法（mapState、mapGetters、mapMutations 和 mapActions）来缩小代码。让咱们来看看这四个辅助工具：

mapState

如果咱们须要在一个组件中调用多个store states属性或getters，咱们能够应用 mapState 帮忙来生成一个获取器函数，这将大大减少代码行数。

import { mapState } from 'vuex'export default {  computed: mapState({    count: state => state.count,    countAlias: 'count',    countPlusLocalState (state) {      return state.count + this.localCount    }  })}

mapGetters

mapGetters 帮忙程序能够用来将store getters映射到本地计算属性。

import { mapGetters } from 'vuex'export default {  computed: {    ...mapGetters([      'count1',      'getter1',    ])  }}

mapMutations

mapMutations 辅助函数能够用来提交组件中的mutations，并将组件办法映射到 store.commit 调用。同样，咱们也能够应用mapMutations传递有效载荷。

import { mapMutations } from 'vuex'export default {  methods: {    ...mapMutations({      cal: 'calculate' // map `this.cal()` to `this.$store.commit('calculate')`    })  }}

mapActions

此帮忙程序用于在组件中分派action，并将组件办法映射到 store.dispatch 调用。

import { mapActions } from 'vuex'export default {  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与其余任何框架一样都反对E2E测试和集成测试。因而，将这些也联合到你的我的项目中将是一个好习惯。通常，路由局部不会应用单元测试进行测试，并且能够通过端到端测试进行笼罩。Vue store是最难测试的局部，举荐的办法是集成测试，因为对状态、动作或获取器的独自测试被认为是无用的。

总结

在经验了以上Vue.js的技术能力之后，我感觉Vue.js和其余框架一样，曾经做好了大型项目的筹备，咱们能够轻松地治理这些我的项目，而不会造成凌乱。你们可能对这个问题也有不同的想法或不同的认识。所以，请在回复区与大家分享你的想法。干杯......!!