- 博客(10)
- 收藏
- 关注
RSS订阅原创 Sass 封装组件级项目样式：手写 ElementPlus
设计一个组件库的样式最重要的就是一点就是样式的高复用性和低耦合度。在一个项目中每个组件会用大量的公共样式，为了确保组件在不同的场景、布局中的样式保持统一，减少样式干扰的可能性。组件样式的命名也是非常需要统一管理的，一个优秀的命名能够增加样式的可读性，组件库中的组件可能会嵌套使用，所以封装公共样式和统一命名规范由为重要，它也直接决定了组件的易用性和扩展性。这篇文章我将详细的向你介绍 Element Plus 中样式是如何封装设计的。
2025-01-19 10:01:32
1012
原创 你知道怎么设计Element Plus组件库中的组件 defineProps 传值吗
组件库中有非常多组件且组件之间复用性也比较高。在Vue组件开发过程中props是数据传输的核心，而props在组件库中有需要定义类型或者校验默认值等信息。但是如果给每个组件都手动定义类型工作量巨大且不易维护，还容易编写出错，存在隐形问题，封装props的类型，开发者只需要传入参数，不需要考虑其他的因素封装好的 props 函数会自动处理。接下来我将详细的向你介绍的buildProps函数的设计思路。
2025-01-11 11:00:14
2143
原创 手写 Element Plus : 搭建 Element Plus 组件打包配置（三）
这篇文章主要讲述了Element Plus组件打包配置，包括Rollup和Gulp的基本概述、主文件打包的具体流程等。介绍了Rollup的常用用法、Gulp的常用用法，详细阐述了主文件打包的初始化、Rollup插件、核心配置、自动化构建打包原理等，最后总结了文章的主要知识点，下篇将介绍模块、类型和样式打包。
2025-01-05 19:37:57
1048
1
原创 手写 Element Plus : 搭建 Element Plus 组件打包配置（三）
这篇文章主要讲述了Element Plus组件打包配置，包括Rollup和Gulp的基本概述、主文件打包的具体流程等。介绍了Rollup的常用用法、Gulp的常用用法，详细阐述了主文件打包的初始化、Rollup插件、核心配置、自动化构建打包原理等，最后总结了文章的主要知识点，下篇将介绍模块、类型和样式打包。
2025-01-05 19:36:32
1183
原创 手写 Element Plus : 搭建 Element Plus 组件打包配置（二）
Rollup和Gulp是 Element Plus 打包过程中的两个重要工具。Rollup 负责模块化打包，而 Gulp 则负责任务调度和自动化。本篇文章将详细的讲述主文件index.ts打包的具体流程，并让你了解 Rollup 和 Gulp 在打包过程的具体使用。本篇篇幅比较长，但是搞懂了这个打包的具体流程就可以读懂整个 Element Plus 的打包流程了，其他的组件库也可以举一反三。Rollup 和 Gulp 在组件库中的综合应用。Element Plus 组件主文件打包流程。
2024-12-27 10:29:56
1116
原创 Element Plus 源码: 搭建 Element Plus 组件库打包配置（一）
Element Plus 源码的打包过程比较复杂，初次看很难理解源码中部分代码的用途。阶段性手写源码难度较大。通过这篇文章，我将让你理解 Element Plus 源码中的组件打包、类型打包、主文件打包、样式打包整体框架逻辑。下篇文章我将从零搭建打包配置，这篇文章只当作了解目录。将每个组件打包成独立的模块，开发者在使用时可以按需引入，减少不必要的代码加载，提升应用的性能。这个就只会引入所需的 ElButton 组件的代码和样式，不会加载整个组件库。
2024-12-20 14:13:47
1912
原创 Element Plus 源码：实现 Icon 组件的详细过程
Element Plus 组件最简单入手的就是 icon 组件，所以先从 icon 组件来大概了解整个项目处理组件的基本原理，由浅入深，能让你了解到ELement Plus 的bem 命名规范themechalk 文件中的 scss,组件如何定义类型和基本实现思路以及部分在 icon 组件中使用到的 hooks 和 utils 中的方法。本章内容比较长，详细的介绍了从零搭建一个 icon 组件的步骤，如果内容存在问题还请多多指正，一起进步。
2024-12-13 15:42:52
3147
原创 Element Plus 源码手写： Element Plus 的 commitlint配置
主要讲述了如何再项目中使用 commitlint 和在手写组件库中如何配置 commitlint 和 husky
2024-12-08 15:41:41
1014
原创 手写 Element Plus： Element Plus 的 ESLint 、 Prettier 配置
文档详细描述了 Element Plus 使用 ESLint 和 Prettier 的配置，目的是统一多人开发的代码风格。内容包括 ESLint 的工作原理（配置文件查找、AST 解析和规则执行）、配置项解析（如 extends、plugins、rules 等）以及 Prettier 和 EditorConfig 的使用。还介绍了项目的代码格式化工具集成流程（如 Husky、lint-staged）和配置示例。通过这些工具实现代码风格校验、自动修复及提交前检查，提升团队开发效率和代码质量。
2024-12-06 17:23:40
2201
原创 手写 Element Plus：用Monorepo架构搭建Element Plus
本文介绍了 Element Plus 源码项目的目录结构及开发环境搭建，重点阐述了使用 pnpm 的 monorepo 管理模块化代码的优势和具体实现方法。通过配置 pnpm-workspace.yaml 和分层管理 TypeScript 配置文件，实现了组件库的低耦合和高效编译。此外，涵盖了幽灵依赖问题的原理及解决方案，指导从零搭建 Element Plus 项目，细化了组件、文档和测试目录结构。
2024-11-28 18:53:39
1497
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人