- 博客(157)
- 收藏
- 关注
RSS订阅原创 Webpack 搭建 Vue3 脚手架详细步骤
本文介绍了如何使用Webpack和Vue3搭建前端项目。首先通过npm初始化项目并安装Vue、Webpack及相关依赖，然后创建项目结构包括Vue组件、入口文件和HTML模板。接着配置Webpack处理Vue文件、JavaScript、CSS和图片资源，并设置开发服务器。最后添加构建脚本，可通过npm run dev启动开发服务器或npm run build生成生产环境代码。整个过程涵盖了从项目初始化到开发构建的完整流程，为Vue3项目提供了基础配置方案。
2025-08-04 14:48:42
166
原创 Vite基本概念及实现原理
Vite是一款基于原生ESM的前端构建工具，由开发服务器和构建指令两部分组成。其核心优势在于极速冷启动和高效热更新(HMR)，通过原生ESM支持实现按需编译，开发速度比传统打包工具快数倍。实现原理上，Vite利用浏览器原生ESM特性动态加载模块，使用Rollup进行生产环境打包，并通过WebSocket实现实时热更新。服务器启动后会解析请求、转换模块并监听文件变化，当文件修改时通过HMR机制局部更新而无需刷新页面。这种架构使Vite在项目规模增大时仍能保持快速构建。
2025-07-30 11:35:55
771
原创 Webpack基本概念及核心流程
Webpack是一个现代JavaScript应用的静态模块打包工具，它通过构建依赖关系图将各种资源（如JS、CSS、图片等）打包成静态文件。核心功能包括模块打包、依赖管理、文件转换、代码拆分和插件扩展。Webpack工作流程分为三个阶段：初始化阶段（参数处理、创建编译器）、构建阶段（递归解析依赖，调用loader转译模块）和生成阶段（输出打包结果）。通过配置entry、output、loader、plugin等选项，Webpack可以实现高效的资源管理和优化，支持多种文件类型的转换和按需加载，大大提升了前端
2025-07-29 10:59:39
762
原创 前端自动化测试：Jest、Puppeteer
Jest和Puppeteer是前端测试的两种主流工具：Jest专注于单元测试，提供简洁API和快速执行；Puppeteer适用于端到端测试，通过真实浏览器模拟用户操作。Jest学习曲线平缓但浏览器模拟有限，Puppeteer功能全面但资源消耗较大。实际应用中，单元测试保证代码基础质量，端到端测试验证整体流程，二者可结合使用以获得更全面的测试覆盖。选择工具时应根据项目需求，平衡测试粒度与执行效率。
2025-07-18 16:35:11
583
原创 css实现文字渐变效果
文字渐变效果实现与问题解决 摘要：使用-webkit-background-clip: text可实现文字渐变效果，需配合color: transparent。当设置固定高度后渐变变淡，原因是文字位置偏移导致只显示部分渐变。解决方案是使用line-height代替height，确保文字垂直居中，如父容器高20px时设置line-height: 20px，既能防止文字溢出，又能保持渐变效果完整。
2025-06-19 18:06:40
390
原创 前端flex、grid布局
Flex布局是一种弹性盒子模型，用于实现网页在不同设备上的自适应展示，主要概念包括弹性容器（父元素）、弹性项目（子元素）以及主轴和侧轴。关键属性包括：flex-direction（定义主轴方向）、justify-content（主轴对齐方式）、align-items（侧轴对齐方式）和flex-wrap（换行设置）。网格布局它将网页划分成一个个网格，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格。
2025-06-06 17:12:33
1233
原创 HTML5新特性
HTML5引入了多项重要特性：1)语义化标签(nav、section等)优化文档结构；2)增强表单功能，新增日期/搜索等输入类型及验证属性；3)原生支持音视频(支持多种格式)；4)两种绘图方案：Canvas(像素级)和SVG(矢量图形)；5)地理定位API获取用户位置；6)拖放API实现元素交互；7)WebWorker创建多线程；8)WebStorage(5M容量)替代Cookie存储；9)WebSocket实现全双工通信。这些特性显著提升了Web应用的交互体验和功能丰富性。
2025-06-03 15:17:37
774
原创 Vue中 toRaw 和 markRaw 的使用
Vue提供了toRaw()和markRaw()方法处理响应式数据转换。toRaw()用于获取响应式对象的原始版本，操作原始对象不会触发页面更新。markRaw()则标记对象不被响应式系统处理，适用于静态数据或性能优化场景。需注意：toRaw不解除响应式，markRaw对已响应式对象无效；嵌套对象可能存在身份不一致问题，原始版本与代理版本可能不同。合理使用这些方法可优化性能，但需谨慎处理对象引用关系。
2025-05-30 11:24:45
591
原创 vue3源码分析 -- h
1）核心是处理shapeFlag赋值，之后在中又通过shapeFlag和type根据按位或运算，重新对shapeFlag赋值 2）h函数本质上是对四个属性处理childrenpropsshapeFlagtype和的增强。
2025-05-06 16:57:01
689
原创 Element UI 设置 el-table-column 宽度 width 为百分比无效
Element UI 设置 el-table-column 宽度 width 为百分比无效，原因是el-table 组件会被 vue 解析成 html，vue 直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了
2025-04-08 18:20:30
1215
原创 vue3源码分析 -- runtime
runtime运行时，主要在目录下，核心提供了hrender等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念。
2025-04-02 15:08:39
603
原创 vue3源码分析 -- watch
1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。
2025-03-29 17:18:05
1142
原创 vue3源码分析 -- computed
computed计算属性实际是一个ComputedRefImpl构造函数的实例ComputedRefImpl构造函数中通过_dirty变量来控制effect中run方法的执行和triggerRefValue的触发 - 初始时_dirty为true，表示计算属性的值尚未计算，需要重新计算 - 当值被计算并缓存后，_dirty设置为false - 当计算属性的依赖发生变化时，例如响应式数据被修改，_dirty重新设置为true，表示需要重新计算值
2025-03-21 10:04:47
1104
原创 微前端简介、注意事项及常见技术方案
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用还可以独立运行、独立开发、独立部署。实现微前端不管是采用什么方案，本质都是一样的，微前端各个部分之间相互独立、独立部署的能力本质是在允许构建孤立或松散耦合的服务。
2025-03-20 10:02:58
1397
原创 vue3源码分析 -- ref
ref函数本质上做了三件事返回RefImpl的实例对数据处理，如果当前数据为基本类型则直接返回；如果是为复杂类型则调用reactive返回reactive数据RefImpl提供get value和set value方法，这就是为什么设置ref值时，需要带上.value
2025-03-19 09:55:58
701
原创 vue3源码分析 -- reactive
reactive函数实际执行了createReactiveObject方法，该方法主要创建了一个Proxy实例对象，给代理对象添加了getter和setter行为getter和setter方法定义在mutableHandlers对象中，用于拦截对象属性的获取和设置操作
2025-03-18 09:38:05
1222
原创 vue3.2.37源码调试步骤
本教程详细介绍了基于Vue3.2.37版本进行本地环境配置与源码调试的全流程。首先需通过npm全局安装pnpm（需Node.js≥16.5.0），使用pnpm安装项目依赖，并在package.json的build命令中添加-s参数开启sourcemap生成。若遇到非Git仓库报错，需执行git init初始化仓库并提交代码。完成构建后需验证dist目录是否生成vue.global.js及其.map文件用于源码映射。随后在examples目录创建learning子目录并编写测试HTML文件
2025-03-07 15:43:03
631
原创 DOM -- 概念、类型、操作
DOM（Document Object Model）是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的APIDOM 节点是 DOM 模型的组成单元。HTML 的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签DOM 树是 DOM 结构的表示形式，DOM 把文档的每个节点根据父子关系连接，形成 DOM 树
2025-03-06 10:07:25
1785
原创 JavaScript基础 -- 函数
函数实际上是对象，每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定
2025-03-01 22:00:11
864
原创 JavaScript基础 -- 代理与反射
ES6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象(target)定义一个关联的代理对象，而这个代理对象可当作一个抽象的目标对象来使用。因此在对目标对象的各种操作影响到目标对象之前，我们可以在代理对象中对这些操作加以控制，并且最终也可能会改变操作返回的结果
2025-02-18 11:26:43
799
原创 从前端视角看设计模式之行为型模式篇
行为型模式关注对象之间的通信和交互，旨在解决对象之间的责任分配和算法的封装包括：责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式
2025-01-23 19:37:36
1443
原创 从前端视角看设计模式之结构型模式篇
上篇介绍了设计模式之创建型模式，接下来介绍设计模式之结构型模式，这些模式关注对象之间的组合和关系，旨在解决如何构建灵活且可复用的类和对象结构
2025-01-20 15:45:02
1056
原创 从前端视角看设计模式之创建型模式篇
"设计模式"源于GOF（四人帮）合著出版的《设计模式：可复用的面向对象软件元素》，该书第一次完整科普了软件开发中设计模式的概念，他们提出的设计模式主要是基于以下的面向对象设计原则：- 对接口编程而不是对实现编程- 优先使用对象组合而不是继承
2025-01-13 10:55:14
991
原创 JavaScript基础 -- 迭代器与生成器
循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的迭代会在一个有序集合上进行，"有序"可以理解为集合所有项都可以按照既定的顺序被遍历到，数组就是 JavaScript 中有序集合的最典型例子
2025-01-09 10:21:59
1077
原创 JavaScript基础 -- 变量、作用域与内存
原始值就是最简单的数据，引用值则是由多个值构成的对象。在把一个值赋给变量时，JavaScript引擎必须要确定这个值是原始值还是引用值原始值大小固定，保存在栈内存上；引用值是对象，存储在堆内存上
2025-01-02 17:31:59
876
原创 WebSocket | 背景 概念 原理 使用 优缺点及适用场景
WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，它使得客户端和服务器之间的数据交换变得更加简单，只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，本质上一种计算机网络应用层的协议，用来弥补 HTTP 协议在持久通信能力上的不足
2024-12-24 16:01:55
1529
1
原创 ECharts复杂业务：与tooltip的交互
想要用ECharts实现：鼠标可以进入图表的tooltip框，并点击其中的内容进行交互。实现这个过程中会遇到一些问题，下面是对其进行总结，并给出解决方案。
2024-10-12 09:59:44
915
原创 抛弃!important 使css优先级变大
在开发中很容易使用!important去增大优先级，这是不好的方法，那有没有更优雅的方式来实现我们覆盖的诉求呢？
2024-09-23 14:38:06
618
原创 Vue3 数据通信
数据在 vue 中是单向流动的，有利于管理数据状态和变化。而在日常组件开发中，难以避免组件之间的数据通信。组件通信可以分为不同的场景，例如父子组件通信、兄弟组件通信、跨层级组件通信等。
2024-09-03 16:29:55
1727
1
原创 JavaScript 运行机制
JavaScript 是单线程，H5 允许 JavaScript 创建多个线程，但是子线程受主线程控制，并且不能操作 DOM。所有任务分为同步任务和异步任务。
2024-08-15 10:07:13
930
原创 vite与webpack有什么不同？为什么vite比webpack快？
vite与webpack有什么不同？为什么vite构建速度比webpack快？
2024-04-16 22:23:59
1871
原创 面向对象基础
c 语言是面向过程的，面向过程就是把一件事按步骤一步一步来实现而 java、c++ 等是面向对象的，面向对象就是把现实问题抽象为对象，通过调用每个对象的属性或方法去解决问题
2024-04-13 15:14:25
547
原创 Javascript进阶内容
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
2024-04-08 19:54:27
1104
原创 常见typescript面试题
假设有一个导入语句：import { a } from “moduleA”（1）编译器通过绝对或相对路径，定位到需要导入的模块文件（2）如果上面解析失败了，没有查找到对应的模块，编译器会尝试定位一个外部模块声明（3）最后，还是不能解析这个模块，就直接抛出一个错误TS Map文件是一个源映射文件，其中有关原始文件的信息。.map是源映射文件，在JS代码和创建它的TS源文件之间进行映射调试调的是TS文件接口用于一个类的话，那接口会表示行为抽象对类的约束，让类去实现接口，类可以实现多个接口。
2024-03-26 11:25:08
1940
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人