構建Vue大型應用的10個最佳實踐(小結)-創(chuàng)新互聯(lián)

這些是我構建大型Vue項目得出的最佳實踐，這些技巧將幫助你更高效的編碼，并且使其更容易維護和協(xié)作。

為南木林等地區(qū)用戶提供了全套網頁設計制作服務，及南木林網站建設行業(yè)解決方案。主營業(yè)務為做網站、成都網站建設、南木林網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

在我今年的自由職業(yè)生涯中我有幸開發(fā)了一些大型Vue程序。我所說的這些項目使用了大量Vuex stores 😰 ，很多Vue組件（有數(shù)百個）和很多視圖（pages）😄。對我而言這是非常有意義的經歷，我發(fā)現(xiàn)了很多使擴展的方法。同時我還需要修復一些亂七八糟的錯誤用法。🍝

所以我將分享我的10個最佳實踐，如果你有大型項目需要開發(fā)推薦你使用他們。

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


最近我寫了一篇文章some important things you need to know regarding slots in Vue.js。 主要講了為什么使用Slots可以提高組件復用且易于維護。

但是這和大型Vue項目有啥關系呢。我將描繪一個使用他們解決你痛點的藍圖。

假如我要開發(fā)一個popup。起初看起來沒有什么難點，僅僅是包括標題，描述和一些按鈕。 所以把所有東西都當作props不就完了嗎。 我用了三個自定義props，并且click按鈕的時候觸發(fā)一個事件。 就是這么簡單！ 😅

隨著項目的不斷發(fā)展，業(yè)務需要顯示許多其他新內容：表單字段，不同的按鈕（取決于顯示在哪個頁面上）、卡片、頁腳和列表。通過添加更多的props可以解決這個問題。😩但是隨著業(yè)務發(fā)展，組件變的太復雜了。因為他包含了很多子組件，需要觸發(fā)很多個事件。🌋我遇到了坑爹的問題，修改了一個功能后影響了其他page上的功能。我創(chuàng)造了一個怪物而不是一個可維護的組件！

但是，一開始使用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個最佳實踐(小結)-創(chuàng)新互聯(lián)
URL地址：http://www.muchs.cn/article38/coiepp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網站、網站營銷、用戶體驗、做網站、云服務器、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網站建設