• Vue.js 3高级编程 UI组件库开发实战
21年品牌 40万+商家 超1.5亿件商品

Vue.js 3高级编程 UI组件库开发实战

全新正版 极速发货

57.24 6.4折 89 全新

库存29件

广东广州
认证卖家担保交易快速发货售后保障

作者杨海民 著

出版社电子工业出版社

ISBN9787121490958

出版时间2024-11

装帧平装

开本16开

定价89元

货号1203446726

上书时间2024-12-02

大智慧小美丽

已实名 已认证 进店 收藏店铺

   商品详情   

品相描述:全新
商品描述
目录
第1章 初识UI组件库 1

1.1 UI组件库是什么 1

1.2 UI组件库的作用 1

1.3 UI组件库的应用 2

本章小结 2

第2章 UI组件库的开发规范 3

2.1 命名规范 3

2.2 目录结构 3

2.3 组件结构 4

2.4 样式规范 5

2.5 组件文档 6

2.6 版本管理 6

本章小结 7

第3章 使用Monorepo构建组件库 8

3.1 安装pnpm 8

3.2 初始化UI组件库 9

3.2.1 建立工作区 9

3.2.2 建立UI组件库包 9

3.2.3 调用UI组件库包 10

3.3 初始化演示库 11

3.4 构建组件的目录结构 13

3.4.1 构建按钮组件 13

3.4.2 按需加载并导出组件 13

3.4.3 全局注册导出组件 14

3.5 演示库测试组件 15

3.5.1 全局注册 15

3.5.2 按需加载 16

本章小结 16

第4章 CSS架构模式 17

4.1 UI组件库元素设计规范 17

4.2 BEM命名规则 18

4.3 命名空间 19

4.4 封装BEM命名规则 20

4.4.1 生成Block 21

4.4.2 生成Element和Modifier 22

本章小结 23

第5章 按钮组件 24

5.1 theme:主题包 24

5.1.1 全量引入 25

5.1.2 按需引入 25

5.2 渲染button组件 26

5.3 theme:主题色渲染 27

5.4 round:圆角按钮 30

5.5 disabled:禁用按钮 31

5.6 text:文字按钮 32

5.7 link:链接按钮 33

5.8 border:边框按钮 35

5.9 block:块级按钮 36

5.10 size:按钮尺寸 37

5.11 circle:圆形按钮 38

5.12 icon:图标按钮 40

5.13 loading:加载按钮 41

5.13.1 手动触发加载 41

5.13.2 自动触发加载 43

5.14 group:按钮组 44

5.14.1 插槽实现按钮组 45

5.14.2 父级组件的属性 46

本章小结 47

第6章 Sass制定组件库全局变量 48

6.1 deep-merge:定义主题色 48

6.2 mix:生成主题色层次 49

6.2.1 定义@mixin方法 50

6.2.2 each、for:循环生成层次色调 51

6.3 定义中性色及其他元素 52

6.4 :root伪类选择器 54

6.5 生成:root变量 54

6.5.1 定义前缀、块、修改器变量 55

6.5.2 :root变量名称的生成规则 56

6.5.3 生成层次色 57

6.5.4 获取:root变量名称 58

6.6 UI组件库全局规范 59

6.7 UI组件库应用规范 61

6.7.1 button组件可变化的属性 61

6.7.2 私有变量 62

6.7.3 绑定变量 64

6.7.4 主题 64

6.7.5 尺寸 67

6.7.6 文字尺寸 68

6.7.7 链接按钮 69

6.7.8 文字按钮 71

6.8 遵循BEM命名规则生成组件类名 72

6.8.1 生成块的类名 72

6.8.2 生成元素的类名 73

6.8.3 生成修改器的类名 73

6.8.4 生成状态的类名 74

本章小结 75

第7章 图标组件 76

7.1 构建icon组件 76

7.2 渲染icon组件 77

7.3 尺寸与颜色 78

7.4 SVG图标 79

7.5 button组件使用SVG图标 80

本章小结 81

第8章 输入框组件 82

8.1 渲染input组件 82

8.1.1 构建组件 82

8.1.2 渲染组件 83

8.1.3 样式变量 84

8.2 disabled:禁用 86

8.3 placeholder:占位符 87

8.4 maxlength:长度限制 88

8.5 size:尺寸 89

8.6 round:圆角 90

8.7 icon:图标 91

8.7.1 渲染UI组件库内置的SVG图标 92

8.7.2 渲染iconfont字体图标 94

8.8 slot:前置、后置 96

8.8.1 渲染前置、后置组件 97

8.8.2 渲染前置、后置标识 99

8.8.3 渲染前缀、后缀标识 101

8.9 password:密码 102

8.10 value:数据双向绑定 104

8.11 clear:清除数据 105

8.12 count:统计字符数 107

8.13 width:宽度 109

8.14 event:事件 110

8.14.1 focus和blur 110

8.14.2 mouseenter和mouselevel 112

8.14.3 compositionstart、compositionupdate和compositionend 113

8.14.4 change、keydown和keyup 115

8.15 expose:暴露对象 116

8.16 textarea:文本域 117

本章小结 118

第9章 布局组件 119

9.1 grid:栅格分栏 119

9.1.1 渲染grid组件 119

9.1.2 CSS弹性布局 121

9.1.3 gutter:间距分隔 122

9.1.4 offset:偏移 124

9.1.5 justif:对齐 125

9.1.6 gap:行间距 126

9.2 container:容器组件 127

9.2.1 容器组件的结构 127

9.2.2 容器外层 128

本章小结 130

第10章 多选框组件 131

10.1 渲染checkbox组件 131

10.1.1 构建组件 131

10.1.2 渲染组件 133

10.1.3 样式变量 134

10.2 theme:主题 135

10.2.1 生成主题变量 136

10.2.2 渲染主题 136

10.3 size:尺寸 138

10.3.1 定义size变量 138

10.3.2 配置size变量 140

10.4 composables:组合式函数 140

10.4.1 定义状态模块 141

10.4.2 应用状态模块 141

10.5 disabled:禁用 142

10.6 group:多选框组 144

10.6.1 provide、inject:通信 145

10.6.2 size:尺寸 146

10.7 model:数据绑定 147

10.7.1 数据模块定义 147

10.7.2 数据测试 148

10.8 checked:勾选 149

10.8.1 checkbox组件 150

10.8.2 checkboxGroup组件 151

10.9 event:事件 152

10.10 async:异步 154

10.10.1 渲染加载效果 154

10.10.2 事件交互 155

10.10.3 数据交互 157

10.11 all:全选 158

10.11.1 渲染全选组件 158

10.11.2 渲染部分选中状态 159

10.11.3 存储选项数据 161

10.11.4 全选交互 162

本章小结 163

第11章 开关组件 164

11.1 渲染switch组件 164

11.1.1 构建组件 164

11.1.2 渲染组件 165

11.1.3 私有全局变量 167

11.1.4 私有样式变量 168

11.2 theme:主题 169

11.3 size:尺寸 171

11.4 text:文字 172

11.5 icon:图标 173

11.6 centerIcon:中心圆图标 173

11.7 disabled:禁用 174

11.8 model:数据绑定 176

11.9 value:值 177

11.10 async:异步 177

11.11 transition:过渡动画 179

本章小结 180

第12章 表单组件 181

12.1 渲染form组件 181

12.1.1 构建组件 181

12.1.2 渲染组件 182

12.1.3 文本区域 184

12.2 AsyncValidator:校验库 185

12.3 rules:数据规则 186

12.4 validate:校验函数 187

12.5 trigger:校验规则类型 189

12.6 merge:合并校验规则 191

12.7 validate:数据校验 192

12.8 submit:提交校验 193

12.8.1 存储formItem组件数据 194

12.8.2 调用form组件校验 195

12.8.3 指定字段校验 196

12.9 reset:重置 197

12.10 required:必填标识 198

12.11 size:尺寸 198

本章小结 199

第13章 消息提示组件 200

13.1 createVNode函数 200

13.1.1 基本语法 200

13.1.2 属性及事件 201

13.2 渲染message组件 202

13.2.1 构建组件 202

13.2.2 渲染组件 204

13.3 transition:过渡动画 206

13.3.1 transition组件 206

13.3.2 动画实现 206

13.3.3 动画过程 207

13.3.4 钩子函数 209

13.4 attribute:初始化属性 210

13.5 z-index:层级顺序 211

13.6 top:顶部偏移 212

13.6.1 存储message组件 213

13.6.2 计算top偏移 214

13.7 autoClose:自动关闭 216

13.8 handleClose:手动关闭 218

13.9 allClose:全部关闭 219

13.10 theme:主题 219

13.11 background:背景颜色 220

13.12 主题方法 222

本章小结 223

第14章 模态框组件 224

14.1 mask:遮罩层 224

14.1.1 构建组件 225

14.1.2 渲染组件 226

14.2 modal:对话框 228

14.2.1 构建结构 228

14.2.2 渲染组件 229

14.3 teleport:传送 231

14.4 transition:过渡动画 231

14.5 footer:脚部 233

14.5.1 按钮属性 233

14.5.2 脚部插槽 234

14.5.3 按钮事件 235

14.6 loading:加载 236

14.6.1 confirmLoading属性 236

14.6.2 beforeChange属性 238

14.7 event:事件回调 239

14.8 maskClose:遮罩关闭 240

14.9 unmount:销毁 241

14.10 width:宽度 242

14.11 fixedScreen:固定屏 243

本章小结 245

第15章 对话框组件 246

15.1 构建组件 246

15.2 title:标题 248

15.3 content:内容描述 250

本章小结 252

第16章 抽屉组件 253

16.1 构建组件 253

16.2 placement:方向 254

16.2.1 absolute:绝对定位 255

16.2.2 position:位置 256

16.3 size:尺寸 257

16.4 transition:过渡动画 258

本章小结 259

第17章 构建UI组件库文档 260

17.1 VitePress 260

17.1.1 初始化文档 260

17.1.2 配置导航栏 263

17.1.3 配置侧边栏 264

17.2 解析Markdown文件 265

17.2.1 主题入口 266

17.2.2 注册全局组件 267

17.2.3 markdown-it-container 267

17.2.4 tokens容器 269

17.3 UI组件库解析 271

17.3.1 定义文档组件 271

17.3.2 读取容器信息 272

17.3.3 读取文档组件 273

17.3.4 渲染组件 274

17.3.5 代码高亮 277

17.3.6 展开/收起源码 279

17.4 撰写组件库文档 281

17.4.1 Markdown语法 281

17.4.2 Markdown扩展功能 281

17.4.3 Markdown表格 282

本章小结 284

第18章 UI组件库的打包和发布 285

18.1 了解Rollup 285

18.1.1 初始化Build打包目录 286

18.1.2 Rollup的基础配置 287

18.1.3 配置打包路径 288

18.2 UMD打包 289

18.2.1 输出UMD组件包 290

18.2.2 测试UMD组件包 291

18.3 ESM、CJS模块化打包 292

18.3.1 ESM、CJS打包输出 292

18.3.2 测试模块化组件包 296

18.4 Gulp打包scss文件 298

18.4.1 全量打包CSS 298

18.4.2 按需加载打包CSS 299

18.5 Gulp多任务 301

18.5.1 series()和parallel() 301

18.5.2 删除组件包 302

18.5.3 生成package.json文件 303

18.6 npm发布 305

18.6.1 package.json文件 305

18.6.2 version 306

18.6.3 peerDependencies 307

18.6.4 发布组件库 309

18.6.5 打包组件库文档 310

18.6.6 按需引入组件样式 311

本章小结 312

内容摘要
本书系统全面地介绍了UI组件库的开发过程,包括UI组件库的开发规范、底层逻辑、开发思维,以及UI组件库的运作原理、版本号管理、Markdown文件、npm发布等。本书配有UI组件库设计稿源文件和UI组件库源码,并附带300个左右的Git分支以及与本书代码清单一一对应的实例代码。本书可以帮助读者进一步提升开发能力、业务理解能力,让开发人员更深入地了解CSS的应用,掌握Vue.js3的新特性,如Composition APl、provide、inject、teleport、slot等关于Vue.js 3的开发技巧。

本书适合Web前端开发人员,需要提升自身开发能力或想开发属于自己的UI组件库的读者,以及有兴趣从事Web前端工作、想深入了解UI组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。

—  没有更多了  —

以下为对购买帮助不大的评价

此功能需要访问孔网APP才能使用
暂时不用
打开孔网APP