首页手记谁说Vue.js不适应于大型项目？大型Vue.js项目...

谁说Vue.js不适应于大型项目？大型Vue.js项目的4个最佳实践你遵循了吗！

标签：

Vue.js vuex

众所周知，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：

States: 用于保存您的应用程序的数据
Getters：用于访问store外部的这些状态对象。
Mutations：用于修改状态对象。
Actions：用于提交突变。

假设你熟悉这四个组成部分，让我们看看你需要遵循的原则。

你需要将应用程序级状态集中存储在store中。
状态应该总是通过提交mutations而发生突变。
异步逻辑应该被封装，并且只能与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是最难测试的部分，推荐的方法是集成测试，因为对状态、动作或获取器的单独测试被认为是无用的。