vue 組件設計
前言 對於component到底需要設計到多小，沒有一定的標準，根據開發情境決定。 component設計: 可以分成設計面跟程式面，其實兩個是差不多的規則。 設計面可以參考原子設計裡面的5個部分: 原子，分子，組織，模板，頁面。 原子: UI的最小單位。一個button、一個input或少數div組成的文字框，可以在整個網頁不斷覆用。 分子: 少數原子組合起來，例如表單裡面的label + input。 組織: 由分子和原子組合起來，例如一個form或是一個card。 模板: 由以上分子和原子和組織組合起來，一個頁面的版型。 頁面: 這裡的頁面不同於模板，而是實際套用資料的結果頁面，例如: 一個產品模板會給很多的產品資料套用，不同的產品資料套用到同一個模板，就是不同的頁面。 程式面從一個組件該做什麼事，如何覆用和組件分類為主要參考。 vue組件分類: vue 組件分成幾類: page 組件 一般可覆用組件 最小單位組件 業務組件 page 組件放在 view資料夾內，每一個在router引用的view組件都是一個page，沒有覆用可能，用來協調業務組件，類似controller。 一般可覆用組件放在components資料夾內，由最小單元組件組成，通常只為了一個目標，為了增 加覆用性，提供可以配置的參數，在可覆用組件內沒有會造成副作用的功能，如call 第三方api，有的話也是通過把網址傳入達到不同的效果，跟function一樣只接收參數跟返回參數。 最小單位組件: 組件的設計就是要盡量小，然後自底而上建構複雜的組件，最小單位組件就是原子組件，通常提供默認樣式、功能和配置樣式、功能。 業務組件通常比較難覆用(除非剛好有一樣的操作邏輯)，因為可能包含特定的業務邏輯和從第三方取得資料(call api)的操作，拉出組件的目的主要是為了減少和優化在page組件上的程式碼，不然都塞在page組件也是可以運作。 現有組件庫 element ui: 現在的組件庫都會強調不用寫css，他們也包含了最小單位組件跟可覆用組件。 這邊只討論組件，不討論layout或是一些內建的排版class。 最小單位組件 以input來看 <el-input v-model="input" placeholder="请输入内容"></el-