共计 3547 个字符，预计需要花费 9 分钟才能阅读完成。
家喻户晓，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
└── modules3.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.js3.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 和其余框架一样，曾经做好了大型项目的筹备，咱们能够轻松地治理这些我的项目，而不会造成凌乱。你们可能对这个问题也有不同的想法或不同的认识。所以，请在回复区与大家分享你的想法。干杯 ……!!
