回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引
 

出版總覽
 

讀者服務
  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名：為你寫的Vue Components：從原子到系統，一步步用設計思維打造面面俱到的元件實戰力（iThome鐵人賽系列書）
書號：MP22531 作者：劉翰璋 著 ISBN： 978-626-414-301-1
定價：NT$780元 印刷：單色 頁數：552頁
書籍規格：17*23 上市日：2025/10/31 譯者：(無)
學習定位：初階 本書附件：網路下載範例檔  
前往購買 >> 蝦皮購物 類別：電腦技術  
       
快速前往 快速前往 快速前往        

 

 
    打造高品質Vue Components的實戰設計指南
    讓你成為可設計元件的專業人才
    掌握Vue Components核心設計思維與實戰技巧
    全面提升前端開發的維護性、擴充性與易用性


    【專業推薦】
    本書的書名叫《為你寫的Vue Components》，但我認為它其實也是「為未來的自己」寫的一本書。當你半年後、一年後再回來看專案時，你會很感謝今天有這樣一本書，幫你養成了正確的習慣。

    ─ Kuro Hsu，Vue.js Taiwan社群主辦人


    程式設計的關鍵從來不是「什麼都自己刻」，而是理解「什麼該借、什麼該寫、什麼該放一邊」。希望你讀完後，能把這套心法內化，從「我會用」到「我會系統化設計」，開始為你自己而寫，讓未來的你感激現在的自己。

    ─ Alex，YouTuber Alex宅幹嘛


    市面上絕大多數的書籍都在教如何使用工具，卻鮮有介紹如何設計好元件的書籍，《為你寫的Vue Components》正是少數真正聚焦在「設計」這件事上的著作。它不是告訴你怎麼用Vue，而是一步步帶你思考：為什麼這個元件應該這樣寫？

    ─ Anthony Fu，Vue核心團隊成員


    本書從實際例子出發，對常見元件提供了從用例、主流庫的實現比較，無障礙到實作範例的深入分析，對於在這方面有興趣進階的開發者，是非常有價值的參考。

    ─ 尤雨溪，Vue.js作者


    【內容簡介】
    ♚從基礎到進階：掌握元件開發的核心技巧與設計思維
    ♚原子元件設計：打造高可重用、易維護的元件庫
    ♚實戰案例導向：完整拆解從UI到邏輯的設計與實作過程
    ♚豐富技術細節：涵蓋高階開發技巧，全面提升實戰技能

    本書改編自第16屆iThome鐵人賽Modern Web組冠軍系列文章《為你自己寫Vue Component》。在前端開發的世界裡，Vue Components是連結UI設計與商業邏輯的關鍵橋梁，從畫面呈現、資料綁定到可重用的功能模組，元件不只是程式碼片段，更是專案維護性、擴充性與團隊協作的核心。

    《為你寫的Vue Components》將帶你從零開始，逐步建立屬於自己的元件設計思維。書中不僅示範如何撰寫高效、可擴充的元件，還深入探討如何實作鍵盤操作與無障礙設計的細節，而SSR應該注意的小訣竅，讓我們設計出來的元件不只自己好用，也為你身邊的各種角色帶來開發與生活上的便利性。

    無論你是剛接觸Vue的新手，或是想精進架構與設計能力的前端工程師，本書都將是你打造高品質Vue Components的最佳指南。

    【目標讀者】
    ✪正在學習或重構Vue元件的工程師。
    ✪想要打造UI Library的團隊成員。
    ✪在意高效、可維護性、無障礙與一致性的開發人員。
    ✪對Atomic Design與元件化實戰有興趣的開發人員。
 
    |Chapter 01| 寫在最前面
    1.1 UI Library的使用與權衡
    1.2 在開始之前，建立最基本的Mindset
    1.3 參考資料

    |Chapter 02| AtomicLink
    2.1 元件分析
    2.2 元件實作
    2.3 進階功能
    2.4 小結
    2.5 參考資料

    |Chapter 03| AtomicButton
    3.1 元件分析
    3.2 元件實作
    3.3 進階功能
    3.4 無障礙
    3.5 小結
    3.6 參考資料

    |Chapter 04| AtomicBreadcrumb
    4.1 元件分析
    4.2 元件實作
    4.3 進階功能
    4.4 無障礙
    4.5 小結
    4.6 參考資料

    |Chapter 05| AtomicPagination
    5.1 元件分析
    5.2 元件實作
    5.3 進階功能
    5.4 小結
    5.5 參考資料

    |Chapter 06| AtomicTabs
    6.1 元件分析
    6.2 元件實作
    6.3 進階功能
    6.4 無障礙
    6.5 小結
    6.6 參考資料

    |Chapter 07| AtomicPopover
    7.1 元件分析
    7.2 元件實作
    7.3 進階功能
    7.4 無障礙
    7.5 小結
    7.6 參考資料

    |Chapter 08| AtomicDropdown
    8.1 元件分析
    8.2 元件實作
    8.3 進階功能
    8.4 無障礙
    8.5 小結
    8.6 參考資料

    |Chapter 09| AtomicScrollbar
    9.1 元件分析
    9.2 元件實作
    9.3 進階功能
    9.4 無障礙
    9.5 小結
    9.6 參考資料

    |Chapter 10| AtomicAccordion / AtomicCollapse
    10.1 元件分析
    10.2 元件實作
    10.3 無障礙
    10.4 小結
    10.5 參考資料

    |Chapter 11| AtomicAvatar
    11.1 元件分析
    11.2 元件實作
    11.3 進階功能
    11.4 小結
    11.5 參考資料

    |Chapter 12| AtomicBadge
    12.1 元件分析
    12.2 元件實作
    12.3 進階功能
    12.4 小結
    12.5 參考資料

    |Chapter 13| AtomicChip
    13.1 元件分析
    13.2 元件實作
    13.3 進階功能
    13.4 小結
    13.5 參考資料

    |Chapter 14| AtomicDivider
    14.1 元件分析
    14.2 元件實作
    14.3 無障礙
    14.4 小結
    14.5 參考資料

    |Chapter 15| AtomicProgress
    15.1 元件分析
    15.2 元件實作
    15.3 進階功能
    15.4 無障礙
    15.5 小結
    15.6 參考資料

    |Chapter 16| AtomicTable
    16.1 元件分析
    16.2 元件實作
    16.3 進階功能
    16.4 無障礙
    16.5 小結
    16.6 參考資料

    |Chapter 17| AtomicTooltip
    17.1 元件分析
    17.2 元件實作
    17.3 無障礙
    17.4 小結
    17.5 參考資料

    |Chapter 18| AtomicModal
    18.1 元件分析
    18.2 元件實作
    18.3 元件整合
    18.4 小結
    18.5 參考資料

    |Chapter 19| AtomicDialog
    19.1 元件分析
    19.2 元件實作
    19.3 進階功能
    19.4 無障礙
    19.5 小結
    19.6 參考資料

    |Chapter 20| AtomicToast
    20.1 元件分析
    20.2 元件實作
    20.3 進階功能
    20.4 無障礙
    20.5 小結
    20.6 參考資料

    |Chapter 21| AtomicFormField
    21.1 元件分析
    21.2 元件實作
    21.3 無障礙
    21.4 小結
    21.5 參考資料

    |Chapter 22| AtomicTextField
    22.1 元件分析
    22.2 元件實作
    22.3 進階功能
    22.4 小結
    22.5 參考資料

    |Chapter 23| AtomicTextarea
    23.1 元件分析
    23.2 元件實作
    23.3 小結
    23.4 參考資料

    |Chapter 24| AtomicSelect
    24.1 元件分析
    24.2 元件實作
    24.3 進階功能
    24.4 無障礙
    24.5 小結
    24.6 參考資料

    |Chapter 25| AtomicCheckbox
    25.1 元件分析
    25.2 元件實作
    25.3 小結
    25.4 參考資料

    |Chapter 26| AtomicSwitch
    26.1 元件分析
    26.2 元件實作
    26.3 無障礙
    26.4 小結
    26.5 參考資料

    |Chapter 27| AtomicRadio
    27.1 元件分析
    27.2 元件實作
    27.3 小結
    27.4 參考資料

    |Chapter 28| AtomicRating
    28.1 元件分析
    28.2 元件實作
    28.3 進階功能
    28.4 無障礙
    28.5 小結
    28.6 參考資料

    |Chapter 29| 設計SSR友善的元件
    29.1 Server Side Rendering需要注意的細節
    29.2 小結
 
    劉翰璋（Alex Liu）
    一個沉浸在前端網頁技術的nerd。目前於曜比科技擔任資深前端工程師，同時且為Nuxt Ecosystem Team成員。熱衷於開源社群的參與，出沒在許多開源專案中。技術主要專注在Vue與Nuxt。除了前端技術外，最大的興趣應該就是吸貓了。
 
 
 		  
     

博碩文化客服信箱
 

[email protected]
 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID：0925177716
0925-177716
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID：0926858627
0926-858627
[email protected]
助理分機 238
 

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel：02-2696-2869　Fax：02-2696-2867　劃撥帳號：17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.