Vue受欢迎的原因很多。这包括框架的简单性，将其轻松集成到现有项目中的便利性，使用它的便利性以及对Vue应用程序施加的限制不大。所有这些还有助于Vue与Angular和React竞争。实际上，在很多方面，Vue都可以与其他流行的框架和库相提并论。
我决定找出他们对Vue缺点的看法。在寻找相关材料时，我注意到他们到处都说Vue不足以开发大型项目。了解Vue，我可以自信地说这不是事实。 在本文中，我想引起您的注意，这是有关开发大型Vue项目的4条详细指南。
1.使用Vue插槽使代码更清晰
设置组件关系时，最常使用父子模型。但是在某些情况下，这样的模型可能远非最成功的。假设您有一个包含大量子组件的单个父组件。这意味着您将不得不使用大量的输入参数（props）并生成许多事件以建立组件的交互。在这种情况下，代码将很快变得混乱。这些是大型项目的开发人员面临的情况。但是Vue具有专门设计用于处理此类问题的机制。
我们正在谈论插槽。它们用于提供表示父子关系的另一种方法。插槽（即元素
<slot>）使开发人员能够重新组织代码。这是一个使用插槽的简单示例：
<div class="demo-content">
<slot></slot>
</div>
呈现这样的组件时，其中的标签
<slot></slot>将由标签的内容替换<demo-content>：
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
Vue项目中可以使用多种插槽。您需要了解的有关插槽的最重要信息是，插槽的使用会对正在发展的项目产生巨大影响。它们可以使您的项目代码保持良好状态，并帮助您创建干净的代码。
2.创建独立的组件并重用它们
在设计组件时，请遵循FIRST原则，使组件具有聚焦性，独立性，可重用性，小型性和可测试性。
实际上，有效设计“大型”系统的秘诀不是一开始就尝试构建这些系统。取而代之的是，这些系统需要由较小的组件组装起来，以解决高度专业化的问题。这使得评估系统较小部分如何满足其“较大”目标变得更加容易。
埃迪·奥斯曼（Eddie Osmani）
您可以使用像Bit这样的专用系统来创建和管理组件。这是关于它的东西。
3.保持Vuex商店井井有条
Vuex是Vue应用程序状态管理模式和库。使用Vuex，您可以为所有应用程序组件组织集中式数据存储。我已经看到有关Vuex的评论，这些评论说Vuex限制了开发人员构建项目的能力，并阻止了他们做他们需要做的事情。我不同意这种说法。Vuex实际上可以帮助遵循一系列原则的开发人员构建项目，使它们更好地组织。
在讨论这些原则之前，我想谈谈Vuex存储库的4个主要组件，任何想要有效使用此类存储库的人都需要了解。如果您熟悉这些组件，则意味着您可以轻松构建Vuex商店并改善项目组织。以下是简短说明：
- 状态：用于存储应用程序数据。
- Getters：用于组织对存储外部状态对象的访问。
- 突变：需要修改状态对象。
- 行动：用于施加突变。
假设您熟悉这些组件，那么让我们谈谈以上原则：
- 需要通过将应用程序层的状态存储在存储库中来对其进行集中管理。
- 必须始终使用突变进行状态更改。
- 异步逻辑必须被封装；它只能通过动作对状态进行动作。
如果您可以遵循这三个原则，则意味着您将能够很好地构建项目。如果在项目成长过程中，您决定将相应的Vuex组件的代码放置在不同的文件中，则可以轻松地做到这一点。以下是使用Vuex的项目结构的示例：
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
▍Vuex模块化存储组织
在本文中，我们讨论的是大型项目。可以预期这些项目将使用非常大和复杂的文件。创建此类项目的程序员需要反映其需求的存储管理机制。同时，存储结构不应不必要地复杂。因此，建议您以模块化的方式组织Vuex商店，并根据您对此类商店的最佳结构的愿景进行自定义。没有确定的方式将存储分为模块。一些开发人员采用基于设计能力的方法，而另一些开发人员则采用数据模型的方法。关于将存储划分为模块的最终决定是由负责项目的程序员决定的。从长远来看，合理的结构化存储会对项目的可用性产生积极影响。
这是用于存储结构的模块化方法的示例：
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
help使用辅助方法
上面我谈到了Vuex存储库中使用的4个组件。考虑一种情况，当您需要访问状态并使用吸气剂时，需要调用组件中的动作和变异。在这种情况下，您无需创建许多方法或计算的属性。你可以简单地使用一个辅助方法（
mapState，mapGetters，mapMutations和mapActions），它的使用将避免过度增加的代码量。让我们谈谈使用这些辅助方法。
▍mapState
如果组件需要访问多个存储属性或多个getter，则意味着我们可以使用辅助方法
mapState来生成getter函数。这使我们不必编写相对大量的代码。
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
▍mapGetters
helper方法
mapGetters用于配置存储获取器到本地计算属性的映射。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
▍mapMutations
辅助方法
mapMutations用于组件中以应用突变。它定义了组件方法和调用之间的对应关系store.commit。此外，此方法可用于将一些数据传输到存储。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
▍map动作
mapActions组件中使用了
一个辅助方法来分派动作。它定义了组件方法和调用之间的对应关系store.dispatch。
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4.不要忘记单元测试
测试是任何项目的另一个重要方面。无论项目的重要性和规模如何，开发人员都应测试他们创建的内容。在具有数百甚至数千个小功能的大型项目中尤其如此。我们的任务是测试每个。单元测试有助于解决此问题。它们允许程序员测试代码的各个模块。这样的测试不仅使您能够识别并消除错误。当更改现有代码时，它们还提高了程序员或程序员团队对其动作正确性的信心水平。随着时间的推移，随着项目的增长，开发人员由于使用了单元测试，因此可以安全地向其中添加新功能，同时不要担心创新将破坏现有机制的工作。为此，您只需要遵循从项目一开始就编写单元测试的实践。
如果我们谈论基于Vue的项目中使用的单元测试，那么可以说这种测试与基于其他框架和库的项目中使用的测试几乎相同。也就是说，Jest，Karma或Mocha与Vue配合良好。但是，无论选择哪种框架来创建测试，在开发单元测试时都需要牢记一些常规准则：
- 如果测试失败，则应显示清晰的错误消息。
- 建议在创建测试时使用良好的断言库。（例如，用于生成声明的机制内置于Jest中，并且在Mocha中使用Chai库）。
- 单元测试应涵盖所有Vue组件。
如果从项目的一开始就遵循这些建议，那么随着项目的发展，它将大大减少调试代码和手动测试的时间。
除了单元测试外，Vue项目还可以进行端到端和集成测试。就像单元测试一样，这里的情况也与其他框架和库的情况非常相似。因此，建议将其包含在项目和类似的测试中。通常，不使用单元测试来测试项目的路由部分。这里使用端到端测试。测试Vue商店是最大的挑战。建议使用集成测试对其进行测试，因为这被认为是浪费时间分别测试状态，操作或获取方法。
结果
在回顾了这篇文章中的Vue.js的技术能力之后，我更加坚信该框架适合于开发大型项目。与其他框架和库一样，在其帮助下，您可以创建和管理此类项目，并使它们保持良好状态。
您认为Vue适合开发大型项目吗？
