本書系統全面地介紹了UI組件庫的開發過程，包括UI組件庫的開發規範、底層邏輯、開發思維，以及UI組件庫的運作原理、版本號管理、Markdown文件、npm發佈等。
本書配有UI組件庫設計稿源文件和UI組件庫源碼，並附帶300個左右的Git分支以及與本書代碼清單一一對應的實例代碼。
本書可以幫助讀者進一步提升開發能力、業務理解能力，讓開發人員更深入地瞭解CSS的應用，掌握Vue.js 3的新特性，如Composition API、provide、inject、teleport、slot等關於Vue.js 3的開發技巧。
本書適合Web前端開發人員，需要提升自身開發能力或想開發屬自己的UI組件庫的讀者，以及有興趣從事Web前端工作、想深入瞭解UI組件庫底層邏輯的讀者。本書也可作為高等院校計算機相關專業的師生用書和培訓學校的教材。
| FindBook |
|
有 1 項符合
楊海民的圖書 |
 |
$ 534 | Vue.js 3高級編程：UI組件庫開發實戰
作者：楊海民 出版社：電子工業出版社 出版日期：2024-11-01 語言：簡體中文 規格：平裝 / 312頁 / 19 x 26 x 1.56 cm / 普通級/ 1-1  博客來 - 其他
- 來源網頁  看圖書介紹
|
|
|
楊海
楊海，遼寧鳳城人，武警少將警銜，第十二屆全國人民代表大會福建地區代表。
維基百科
維基百科圖書介紹 - 資料來源：博客來 評分：
圖書名稱：Vue.js 3高級編程：UI組件庫開發實戰
內容簡介
作者介紹
楊海民，從事Web前端開發多年，常年研究並使用Vue.js相關技術，負責多個大型項目，包括SAAS項目的整體架框搭建、核心模塊設計、業務組件、制定開發規範和標準、性能優化、用戶體驗開發等，同時負責項目開發進度管控、業務模塊分配、團隊技術指導等。多次參與公司項目評審，提出可行性及建議性方案，並多次組織團隊分享技術經驗，提升業務邏輯思維能力。
目錄
第1章 初識UI組件庫
1.1 UI組件庫是什麼
1.2 UI組件庫的作用
1.3 UI組件庫的應用
本章小結
第2章 UI組件庫的開發規範
2.1 命名規範
2.2 目錄結構
2.3 組件結構
2.4 樣式規範
2.5 組件文檔
2.6 版本管理
本章小結
第3章 使用Monorepo構建組件庫
3.1 安裝pnpm
3.2 初始化UI組件庫
3.2.1 建立工作區
3.2.2 建立UI組件庫包
3.2.3 調用UI組件庫包
3.3 初始化演示庫
3.4 構建組件的目錄結構
3.4.1 構建按鈕組件
3.4.2 按需加載並導出組件
3.4.3 全域註冊導出組件
3.5 演示庫測試組件
3.5.1 全域註冊
3.5.2 按需加載
本章小結
第4章 CSS架構模式
4.1 UI組件庫元素設計規範
4.2 BEM命名規則
4.3 命名空間
4.4 封裝BEM命名規則
4.4.1 生成Block
4.4.2 生成Element和Modifier
本章小結
第5章 按鈕組件
5.1 theme：主題包
5.1.1 全量引入
5.1.2 按需引入
5.2 渲染button組件
5.3 theme：主題色渲染
5.4 round：圓角按鈕
5.5 disabled：禁用按鈕
5.6 text：文字按鈕
5.7 link：鏈接按鈕
5.8 border：邊框按鈕
5.9 block：塊級按鈕
5.10 size：按鈕尺寸
5.11 circle：圓形按鈕
5.12 icon：圖標按鈕
5.13 loading：加載按鈕
5.13.1 手動觸發加載
5.13.2 自動觸發加載
5.14 group：按鈕組
5.14.1 插槽實現按鈕組
5.14.2 父級組件的屬性
本章小結
第6章 Sass制定組件庫全局變量
6.1 deep-merge：定義主題色
6.2 mix：生成主題色層次
6.2.1 定義@mixin方法
6.2.2 each、for：循環生成層次色調
6.3 定義中性色及其他元素
6.4 ：root偽類選擇器
6.5 生成：root變量
6.5.1 定義前綴、塊、修改器變量
6.5.2 ：root變量名稱的生成規則
6.5.3 生成層次色
6.5.4 獲取：root變量名稱
6.6 UI組件庫全域規範
6.7 UI組件庫應用規範
6.7.1 button組件可變化的屬性
6.7.2 私有變量
6.7.3 綁定變量
6.7.4 主題
6.7.5 尺寸
6.7.6 文字尺寸
6.7.7 鏈接按鈕
6.7.8 文字按鈕
6.8 遵循BEM命名規則生成組件類名
6.8.1 生成塊的類名
6.8.2 生成元素的類名
6.8.3 生成修改器的類名
6.8.4 生成狀態的類名
本章小結
第7章 圖標組件
7.1 構建icon組件
7.2 渲染icon組件
7.3 尺寸與顏色
7.4 SVG圖標
7.5 button組件使用SVG圖標
本章小結
第8章 輸入框組件
8.1 渲染input組件
8.1.1 構建組件
8.1.2 渲染組件
8.1.3 樣式變量
8.2 disabled：禁用
8.3 placeholder：占位符
8.4 maxlength：長度限制
8.5 size：尺寸
8.6 round：圓角
8.7 icon：圖標
8.7.1 渲染UI組件庫內置的SVG圖標
8.7.2 渲染iconfont字體圖標
8.8 slot：前置、後置
8.8.1 渲染前置、後置組件
8.8.2 渲染前置、後置標識
8.8.3 渲染前綴、後綴標識
8.9 password：密碼
8.10 value：數據雙向綁定
8.11 clear：清除數據
8.12 count：統計字符數
8.13 width：寬度
8.14 event：事件
8.14.1 focus和blur
8.14.2 mouseenter和mouselevel
8.14.3 compositionstart、compositionupdate和compositionend
8.14.4 change、keydown和keyup
8.15 expose：暴露對象
8.16 textarea：文本域
本章小結
第9章 佈局組件
9.1 grid：柵格分欄
9.1.1 渲染grid組件
9.1.2 CSS彈性佈局
9.1.3 gutter：間距分隔
9.1.4 offset：偏移
9.1.5 justif：對齊
9.1.6 gap：行間距
9.2 container：容器組件
9.2.1 容器組件的結構
9.2.2 容器外層
本章小結
第10章 多選框組件
10.1 渲染checkbox組件
10.1.1 構建組件
10.1.2 渲染組件
10.1.3 樣式變量
10.2 theme：主題
10.2.1 生成主題變量
10.2.2 渲染主題
10.3 size：尺寸
10.3.1 定義size變量
10.3.2 配置size變量
10.4 composables：組合式函數
10.4.1 定義狀態模塊
10.4.2 應用狀態模塊
10.5 disabled：禁用
10.6 group：多選框組
10.6.1 provide、inject：通信
10.6.2 size：尺寸
10.7 model：數據綁定
10.7.1 數據模塊定義
10.7.2 數據測試
10.8 checked：勾選
10.8.1 checkbox組件
10.8.2 checkboxGroup組件
10.9 event：事件
10.10 async：異步
10.10.1 渲染加載效果
10.10.2 事件交互
10.10.3 數據交互
10.11 all：全選
…..
1.1 UI組件庫是什麼
1.2 UI組件庫的作用
1.3 UI組件庫的應用
本章小結
第2章 UI組件庫的開發規範
2.1 命名規範
2.2 目錄結構
2.3 組件結構
2.4 樣式規範
2.5 組件文檔
2.6 版本管理
本章小結
第3章 使用Monorepo構建組件庫
3.1 安裝pnpm
3.2 初始化UI組件庫
3.2.1 建立工作區
3.2.2 建立UI組件庫包
3.2.3 調用UI組件庫包
3.3 初始化演示庫
3.4 構建組件的目錄結構
3.4.1 構建按鈕組件
3.4.2 按需加載並導出組件
3.4.3 全域註冊導出組件
3.5 演示庫測試組件
3.5.1 全域註冊
3.5.2 按需加載
本章小結
第4章 CSS架構模式
4.1 UI組件庫元素設計規範
4.2 BEM命名規則
4.3 命名空間
4.4 封裝BEM命名規則
4.4.1 生成Block
4.4.2 生成Element和Modifier
本章小結
第5章 按鈕組件
5.1 theme：主題包
5.1.1 全量引入
5.1.2 按需引入
5.2 渲染button組件
5.3 theme：主題色渲染
5.4 round：圓角按鈕
5.5 disabled：禁用按鈕
5.6 text：文字按鈕
5.7 link：鏈接按鈕
5.8 border：邊框按鈕
5.9 block：塊級按鈕
5.10 size：按鈕尺寸
5.11 circle：圓形按鈕
5.12 icon：圖標按鈕
5.13 loading：加載按鈕
5.13.1 手動觸發加載
5.13.2 自動觸發加載
5.14 group：按鈕組
5.14.1 插槽實現按鈕組
5.14.2 父級組件的屬性
本章小結
第6章 Sass制定組件庫全局變量
6.1 deep-merge：定義主題色
6.2 mix：生成主題色層次
6.2.1 定義@mixin方法
6.2.2 each、for：循環生成層次色調
6.3 定義中性色及其他元素
6.4 ：root偽類選擇器
6.5 生成：root變量
6.5.1 定義前綴、塊、修改器變量
6.5.2 ：root變量名稱的生成規則
6.5.3 生成層次色
6.5.4 獲取：root變量名稱
6.6 UI組件庫全域規範
6.7 UI組件庫應用規範
6.7.1 button組件可變化的屬性
6.7.2 私有變量
6.7.3 綁定變量
6.7.4 主題
6.7.5 尺寸
6.7.6 文字尺寸
6.7.7 鏈接按鈕
6.7.8 文字按鈕
6.8 遵循BEM命名規則生成組件類名
6.8.1 生成塊的類名
6.8.2 生成元素的類名
6.8.3 生成修改器的類名
6.8.4 生成狀態的類名
本章小結
第7章 圖標組件
7.1 構建icon組件
7.2 渲染icon組件
7.3 尺寸與顏色
7.4 SVG圖標
7.5 button組件使用SVG圖標
本章小結
第8章 輸入框組件
8.1 渲染input組件
8.1.1 構建組件
8.1.2 渲染組件
8.1.3 樣式變量
8.2 disabled：禁用
8.3 placeholder：占位符
8.4 maxlength：長度限制
8.5 size：尺寸
8.6 round：圓角
8.7 icon：圖標
8.7.1 渲染UI組件庫內置的SVG圖標
8.7.2 渲染iconfont字體圖標
8.8 slot：前置、後置
8.8.1 渲染前置、後置組件
8.8.2 渲染前置、後置標識
8.8.3 渲染前綴、後綴標識
8.9 password：密碼
8.10 value：數據雙向綁定
8.11 clear：清除數據
8.12 count：統計字符數
8.13 width：寬度
8.14 event：事件
8.14.1 focus和blur
8.14.2 mouseenter和mouselevel
8.14.3 compositionstart、compositionupdate和compositionend
8.14.4 change、keydown和keyup
8.15 expose：暴露對象
8.16 textarea：文本域
本章小結
第9章 佈局組件
9.1 grid：柵格分欄
9.1.1 渲染grid組件
9.1.2 CSS彈性佈局
9.1.3 gutter：間距分隔
9.1.4 offset：偏移
9.1.5 justif：對齊
9.1.6 gap：行間距
9.2 container：容器組件
9.2.1 容器組件的結構
9.2.2 容器外層
本章小結
第10章 多選框組件
10.1 渲染checkbox組件
10.1.1 構建組件
10.1.2 渲染組件
10.1.3 樣式變量
10.2 theme：主題
10.2.1 生成主題變量
10.2.2 渲染主題
10.3 size：尺寸
10.3.1 定義size變量
10.3.2 配置size變量
10.4 composables：組合式函數
10.4.1 定義狀態模塊
10.4.2 應用狀態模塊
10.5 disabled：禁用
10.6 group：多選框組
10.6.1 provide、inject：通信
10.6.2 size：尺寸
10.7 model：數據綁定
10.7.1 數據模塊定義
10.7.2 數據測試
10.8 checked：勾選
10.8.1 checkbox組件
10.8.2 checkboxGroup組件
10.9 event：事件
10.10 async：異步
10.10.1 渲染加載效果
10.10.2 事件交互
10.10.3 數據交互
10.11 all：全選
…..
|
