國立勤益科技大學 資訊管理系

#發問 Vue設計高彈性的Component

5月24日 16:56
如題: 在設計Component時,通常會設計成可重複利用以及可擴充的一個形式 在使用工具上比較常用到的就是props,slot,JS去控制 那在設計.vue檔時勢必會把檔案拆成HTML,JS,CSS 如圖
這樣在實作時會有較高的彈性可以去做設計 想詢問一下有沒有更好的拆分模式 或者大家平常在拆分都是怎樣的一個目錄或者設計模式??
5
回應 9
文章資訊
共 9 則留言
國立勤益科技大學
國立高雄大學 資訊管理學系
Component要拆多細怎麼拆是看個人習慣吧,有人喜歡按頁面來拆,有人按區塊,有人按功能沒有標準答案阿
龍華科技大學
可以參考看看一些Vue的UI框架,你會發現每家方式都不太一樣。這邊拿兩個都是按鈕元件的範例給你參考看看。 Vuetify:
CubeUI:
國立臺北大學
你是不是搞錯.vue的架構了?.vue 就是讓你可以在同一個檔案裡寫該component需要的html, css, js,不是像你圖片那樣,還要連結到其他路徑
原 PO - 國立勤益科技大學 資訊管理系
B2 了解 B3 感謝資料 B4 你講的這些基礎我知道,請看好問題再來回答,我指的是在重複使用前提之下如果拆分能讓彈性更大,看看上面的留言或許你會知道我們在討論什麼
我也有點好奇 如果做成共用組件的情況下就代表這個組件的html結構 js邏輯與css樣式已經被包裝起來可以復用 邏輯復用也不太可能整個函式都是一樣的多半會將其中的邏輯抽出模組化 樣式有一樣的情況應該也是專案的規範已經定義這樣也是抽到assets管理 所以不太明白為何將html js css都拆開然後引入一個vue檔 蠻想知道為什麼
國立雲林科技大學
雖然我是寫react 的但概念我想差不多 看你每個component 的顆粒度要多大 看這個component 復用程度多廣 依我自己的經驗,因為我們是monorepo 所以有些component 是只在某個專案復用,另外一些可能是要跨專案復用。所以在開發時就必須要知道這個component 要做的多彈性/小 我個人會覺得如果你覺得某個component 在其他地方可以共用但是你又需要注入「很多」(很多是多少團隊自己斟酌)props 才能符合各地的需求 有可能是他們可能只是長的像但是其實不能復用,又或者component 要拆的更細
國立清華大學
先說在前面每個公司或專案的結構都不,請跟據團隊的共識開發。 根據我的經驗,每個主要頁面為一個.vue檔及一個.js檔,(css檔的部分則另外統一放,用 class 去控制元件樣式)。 之所以要分成.vue檔及.js檔是為了把頁面的排版結構(template或是html這種)及邏輯的部分分開(js的部分),這是為了後續維護方便,如果之後要修改排版,就改.vue檔,要改邏輯,就改js檔。 而每個頁面裡面可能又分成不同區域,也可視作小的 component,因此在每一頁的資料夾下,可以再開一個 components 資料夾,專門用來放這頁會用到的 components。 另外提一點,之所以要模組化,為了複用是一個原因,但不是唯一原因,就像你可以把所有的程式碼寫在一個檔案裡,可能寫個一萬行,而模組化另一個原因就是把整個系統區分成不同區塊,要修改哪邊只要開啟該部分的檔案修改,不用從一個檔案的一萬行中找到要修改的地方,因此模組化也是為了維護性及可讀性。
嶺東科技大學
你這個感覺比較像是react把