构建Vue大型应用的10个最佳实践(小结)-创新互联

这些是我构建大型Vue项目得出的最佳实践，这些技巧将帮助你更高效的编码，并且使其更容易维护和协作。

为南木林等地区用户提供了全套网页设计制作服务，及南木林网站建设行业解决方案。主营业务为做网站、成都网站建设、南木林网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在我今年的自由职业生涯中我有幸开发了一些大型Vue程序。我所说的这些项目使用了大量Vuex stores 😰 ，很多Vue组件（有数百个）和很多视图（pages）😄。对我而言这是非常有意义的经历，我发现了很多使扩展的方法。同时我还需要修复一些乱七八糟的错误用法。🍝

所以我将分享我的10个最佳实践，如果你有大型项目需要开发推荐你使用他们。

1. 使用Slots可以使你的组件更强大和便于理解。

最近我写了一篇文章some important things you need to know regarding slots in Vue.js。主要讲了为什么使用Slots可以提高组件复用且易于维护。

但是这和大型Vue项目有啥关系呢。我将描绘一个使用他们解决你痛点的蓝图。

假如我要开发一个popup。起初看起来没有什么难点，仅仅是包括标题，描述和一些按钮。所以把所有东西都当作props不就完了吗。我用了三个自定义props，并且click按钮的时候触发一个事件。就是这么简单！ 😅

随着项目的不断发展，业务需要显示许多其他新内容：表单字段，不同的按钮（取决于显示在哪个页面上）、卡片、页脚和列表。通过添加更多的props可以解决这个问题。😩但是随着业务发展，组件变的太复杂了。因为他包含了很多子组件，需要触发很多个事件。🌋我遇到了坑爹的问题，修改了一个功能后影响了其他page上的功能。我创造了一个怪物而不是一个可维护的组件！

但是，一开始使用slots可能会更好。最终我使小组件来重构这个组件。使他更容易维护、好理解、好扩展。

<template>
 <div class="c-base-popup">
  <div v-if="$slot.header" class="c-base-popup__header">
   <slot name="header">
  </div>
  <div v-if="$slot.subheader" class="c-base-popup__subheader">
   <slot name="subheader">
  </div>
  <div class="c-base-popup__body">
   <h2>{{ title }}</h2>
   <p v-if="description">{{ description }}</p>
  </div>
  <div v-if="$slot.actions" class="c-base-popup__actions">
   <slot name="actions">
  </div>
  <div v-if="$slot.footer" class="c-base-popup__footer">
   <slot name="footer">
  </div>
 </div>
</template>

<script>
export default {
 props: {
  description: {
   type: String,
   default: null
  },
  title: {
   type: String,
   required: true
  }
 }
}
</script>

本文名称：构建Vue大型应用的10个最佳实践(小结)-创新互联
URL地址：https://www.cdcxhl.com/article38/coiepp.html

成都网站建设公司_创新互联，为您提供动态网站、网站营销、用户体验、做网站、云服务器、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容