- 推荐0
- 收藏0
- 浏览242
Vue.js 3高级编程：UI组件库开发实战
- 书 号：9787121490958
- 出版日期：2024-11-01
- 页 数：
- 开 本：
- 出版状态：上市销售
- 维护人：博文小编
《Vue.js 3高级编程：UI组件库开发实战》系统全面地介绍了UI组件库的开发过程，包括UI组件库的开发规范、底层逻辑、开发思维，以及UI组件库的运作原理、版本号管理、Markdown文件、npm发布等。本书配有UI组件库设计稿源文件和UI组件库源码，并附带300个左右的Git分支以及与本书代码清单一一对应的实例代码。本书可以帮助读者进一步提升开发能力、业务理解能力，让开发人员更深入地了解CSS的应用，掌握Vue.js 3的新特性，如Composition API、provide、inject、teleport、slot等关于Vue.js 3的开发技巧。
《Vue.js 3高级编程：UI组件库开发实战》适合Web前端开发人员，需要提升自身开发能力或想开发属于自己的UI组件库的读者，以及有兴趣从事Web前端工作、想深入了解UI组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。
《Vue.js 3高级编程：UI组件库开发实战》适合Web前端开发人员，需要提升自身开发能力或想开发属于自己的UI组件库的读者，以及有兴趣从事Web前端工作、想深入了解UI组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。
详解UI组件库开发规范、运作原理与开发过程。
CSS的应用、组件底层逻辑与Vue.js 3开发技巧。
读者群领取配套UI组件库设计稿源文件和UI组件库源码。
附带300余个Git分支，对应本书的代码清单。
CSS的应用、组件底层逻辑与Vue.js 3开发技巧。
读者群领取配套UI组件库设计稿源文件和UI组件库源码。
附带300余个Git分支，对应本书的代码清单。
为什么要学习开发UI组件库
在前端开发领域，技术发展非常迅速——由最初的HTML到现在的前端框架、模块化、组件化、UI组件库等。UI组件库已成为现代前端开发人员的首选工具之一，如AntDesign、Element Plus。第三方的UI组件库设计美观、交互功能强大，甚至有些神秘。也正因如此，掌握UI组件库的开发可以帮助前端开发人员大幅提高自身能力及生产力，是从初级开发人员向高级开发人员过渡的过程。开发UI组件库不但可以揭秘UI组件库的底层逻辑，而且可以更深入地学习UI组件库的开发思维、功能交互、CSS技巧等，进而开发一套属于自己的UI组件库。
为什么要写作本书
笔者从前端领域的“小白”一路走到今天，建立了多个自己的前端学习交流群。在学习群中交流时，笔者发现大多数前端开发人员仍然停留在UI组件库的应用层面，并没有深入了解UI组件库的底层逻辑。当然，也有很多群友想开发UI组件库，但无奈于对UI组件库不了解，导致无法深入学习。
因此，为了让更多的前端开发人员和爱好者学习UI组件库的开发技巧，并体验UI组件库的开发过程，笔者决定撰写本书。如果你跟随本书的内容安排认真地开发UI组件库，那么笔者相信，随着学习过程的逐步深入，你会发现UI组件库原来没有那么神秘，你会有豁然开朗之感，并且越来越有成就感，学习动力也会越来越强。
读者对象
◎ 计算机专业在校学生、初入职场等对UI组件库不熟悉的Web开发人员。
◎ 具有一定的Vue.js 3技术基础，希望进一步学习Vue.js 3技术、提升自身能力的Web开发人员。
本书内容
本书共18章，各章简介如下。
第1章“初识UI组件库”介绍UI组件库是什么，以及其对项目和团队起到的作用。
第2章“UI组件库的开发规范”介绍开发UI组件库过程中需要注意的规范，如命名规范、目录结构、样式规范等，有助于读者理解并管理组件。
第3章“使用Monorepo构建组件库”介绍如何初始化UI组件库，以及组件的目录结构、演示库的初始化及测试。
第4~16章是本书的重点内容，介绍UI组件库的具体开发过程，包括各种组件的开发思路和思想、CSS的模式、组件的方法封装，通过不同的属性配置实现不同模式的组件渲染效果，以及组件底层逻辑和Vue.js 3技术的新方法、新应用。
第17章“构建UI组件库文档”介绍如何使用VitePress快速构建组件库说明文档，如何使用Markdown编写组件库文档内容，包括使用Markdown解析组件、渲染组件源码、渲染组件示例，以及描述组件的属性、方法等。
第18章“UI组件库的打包和发布”介绍使用Rollup实现UMD、CJS、ESM等不同模式的打包，以及全量和按需打包CSS，并采用Gulp多任务模式执行指令打包UI组件库，最终将打包后的组件库发布至npm平台。
使用示例
本书中的示例代码基于Windows 10及以上版本操作系统运行，也可以在macOS操作系统中运行，需要安装下列软件。
◎ Chrome 23或更高版本、Safari 6或更高版本、Firefox 21或更高版本、Opear 15或更高版本。
◎ Visual Studio Code最新版本。
◎ Node.js 16或更高级别的稳定版本。
◎ Git最新版本。
项目源码及课件
在学习本书中的示例代码时，既可以手动输入代码，也可以使用Git工具拉取Gitee仓库源码文件。仓库源码拉取成功后，可一次性拉取项目的所有远程分支，指令如下。
◎ 拉取所有分支：git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done。
◎ 创建并更新所有本地远程分支：git fetch --all。
◎ 同步所有远程分支内容：git pull --all。
源码拉取完成后，可使用git branch -a指令查看项目的本地和远程分支，项目的分支和本书的“代码清单”一一对应。此外，读者可在本书读者群中下载与本书配套的所有资料，包括UI组件库稿件及项目源码等。
在跟随本书学习UI组件库开发的过程中，为了确保读者自行开发的UI组件库与本书的逻辑一致并正常运行，读者安装的依赖包应尽可能与本书示例代码中安装的依赖包版本号保持一致。
在前端开发领域，技术发展非常迅速——由最初的HTML到现在的前端框架、模块化、组件化、UI组件库等。UI组件库已成为现代前端开发人员的首选工具之一，如AntDesign、Element Plus。第三方的UI组件库设计美观、交互功能强大，甚至有些神秘。也正因如此，掌握UI组件库的开发可以帮助前端开发人员大幅提高自身能力及生产力，是从初级开发人员向高级开发人员过渡的过程。开发UI组件库不但可以揭秘UI组件库的底层逻辑，而且可以更深入地学习UI组件库的开发思维、功能交互、CSS技巧等，进而开发一套属于自己的UI组件库。
为什么要写作本书
笔者从前端领域的“小白”一路走到今天，建立了多个自己的前端学习交流群。在学习群中交流时，笔者发现大多数前端开发人员仍然停留在UI组件库的应用层面，并没有深入了解UI组件库的底层逻辑。当然，也有很多群友想开发UI组件库，但无奈于对UI组件库不了解，导致无法深入学习。
因此，为了让更多的前端开发人员和爱好者学习UI组件库的开发技巧，并体验UI组件库的开发过程，笔者决定撰写本书。如果你跟随本书的内容安排认真地开发UI组件库，那么笔者相信，随着学习过程的逐步深入，你会发现UI组件库原来没有那么神秘，你会有豁然开朗之感，并且越来越有成就感，学习动力也会越来越强。
读者对象
◎ 计算机专业在校学生、初入职场等对UI组件库不熟悉的Web开发人员。
◎ 具有一定的Vue.js 3技术基础，希望进一步学习Vue.js 3技术、提升自身能力的Web开发人员。
本书内容
本书共18章，各章简介如下。
第1章“初识UI组件库”介绍UI组件库是什么，以及其对项目和团队起到的作用。
第2章“UI组件库的开发规范”介绍开发UI组件库过程中需要注意的规范，如命名规范、目录结构、样式规范等，有助于读者理解并管理组件。
第3章“使用Monorepo构建组件库”介绍如何初始化UI组件库，以及组件的目录结构、演示库的初始化及测试。
第4~16章是本书的重点内容，介绍UI组件库的具体开发过程，包括各种组件的开发思路和思想、CSS的模式、组件的方法封装，通过不同的属性配置实现不同模式的组件渲染效果，以及组件底层逻辑和Vue.js 3技术的新方法、新应用。
第17章“构建UI组件库文档”介绍如何使用VitePress快速构建组件库说明文档，如何使用Markdown编写组件库文档内容，包括使用Markdown解析组件、渲染组件源码、渲染组件示例，以及描述组件的属性、方法等。
第18章“UI组件库的打包和发布”介绍使用Rollup实现UMD、CJS、ESM等不同模式的打包，以及全量和按需打包CSS，并采用Gulp多任务模式执行指令打包UI组件库，最终将打包后的组件库发布至npm平台。
使用示例
本书中的示例代码基于Windows 10及以上版本操作系统运行，也可以在macOS操作系统中运行，需要安装下列软件。
◎ Chrome 23或更高版本、Safari 6或更高版本、Firefox 21或更高版本、Opear 15或更高版本。
◎ Visual Studio Code最新版本。
◎ Node.js 16或更高级别的稳定版本。
◎ Git最新版本。
项目源码及课件
在学习本书中的示例代码时，既可以手动输入代码，也可以使用Git工具拉取Gitee仓库源码文件。仓库源码拉取成功后，可一次性拉取项目的所有远程分支，指令如下。
◎ 拉取所有分支：git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done。
◎ 创建并更新所有本地远程分支：git fetch --all。
◎ 同步所有远程分支内容：git pull --all。
源码拉取完成后，可使用git branch -a指令查看项目的本地和远程分支，项目的分支和本书的“代码清单”一一对应。此外，读者可在本书读者群中下载与本书配套的所有资料，包括UI组件库稿件及项目源码等。
在跟随本书学习UI组件库开发的过程中，为了确保读者自行开发的UI组件库与本书的逻辑一致并正常运行，读者安装的依赖包应尽可能与本书示例代码中安装的依赖包版本号保持一致。