rickllyka-CSDN博客

原创前端学习笔记（15）Vue 使用Vite构建项目

本文介绍了使用Vite构建Vue3项目的主要方法。Vite相比Webpack具有毫秒级启动和热更新优势，支持ES Modules原生加载。文章详细说明了项目创建命令、vite.config.js配置要点（包括插件、路径别名、开发服务器等）、常用插件和环境变量设置，并对比了pnpm与npm的命令差异。Vite通过Rollup打包生产代码，配置文件支持手动分包优化，是Vue3项目的推荐构建工具。

2026-05-21 16:37:44 90

Vue提供了provide/inject机制实现跨层次组件通信。在祖先组件使用provide函数传递数据（支持普通值、响应式数据和方法），后代组件通过inject函数接收。Vue3中provide/inject在setup阶段执行，Vue2则作为选项使用。数据冲突时遵循就近原则和后定义覆盖规则。开发者可通过getCurrentInstance().provides查看当前组件提供的所有键值。相比props逐层传递，provide/inject能直接跨多级组件共享数据，简化了复杂组件树的数据流管理。

2026-05-18 16:47:06 277

原创前端学习笔记（13）Vue2 Eventbus事件总线

本文介绍了Vue2中EventBus事件总线的基本概念和使用方法。EventBus是一个空的Vue实例，挂载到Vue.prototype上，用于实现任意组件间的通信。文章详细说明了如何创建EventBus实例、监听事件（在created中注册，beforeDestroy中注销）以及触发事件的方法，并给出了项目实例展示加工协议列表操作中如何使用EventBus实现组件间通信。特别强调了Vue3中不再支持$on和$off方法，以及handler不能使用匿名函数的注意事项。

2026-05-14 13:30:58 36

原创前端学习笔记（12）Vue2 项目打包工具

本文介绍了Vue2项目打包工具的基础知识，主要包括npm包管理工具、Webpack模块打包工具和vue-cli脚手架工具的功能。重点讲解了Vue2项目中的关键配置文件：package.json（管理依赖和脚本）、vue.config.js（Webpack配置）、babel.config.js（转译配置）和.env环境变量文件。文章还详细说明了常用命令npm install、npm run dev（开发模式）和npm run build（生产打包）的作用及执行流程，帮助开发者快速上手Vue2项目的构建和部署工

2026-05-11 14:35:14 149

原创前端学习笔记（11）Vue mixin和composable

本文对比了Vue中mixin和composable两种代码复用方式。mixin用于选项式API，通过合并组件选项实现复用，但存在命名冲突、依赖模糊等问题。composable是组合式API下的替代方案，通过导出函数实现逻辑复用，具有隔离性好、易于维护等优势。文章详细介绍了两者的创建和使用方法，并分析了各自的适用场景和优缺点，推荐在组合式API中使用composable以获得更好的代码组织和维护性。

2026-05-07 14:39:21 320

原创前端学习笔记（10）VueRouter 深入

Vue Router 深入使用指南摘要本文深入探讨了Vue Router的高级用法，主要包括：动态路由：通过addRoute/addRoutes方法动态添加单个或多个路由导航守卫：详细解析beforeEach守卫的三个核心参数(to/from/next)及其控制逻辑路由对象：全面介绍$route对象的属性(path/fullPath/params/meta等)及使用场景项目实践：展示ERP系统中基于token验证的路由守卫实现方案 API使用：对比router(操作路由)和route(获取路由信息

2026-04-30 15:15:56 364

原创前端学习笔记（9）Vue3 生命周期、原子化CSS

Vue3生命周期与CSS原子化样式笔记摘要 Vue3生命周期：组件经历创建、挂载、更新、销毁4个阶段，共8个钩子函数选项式和组合式API对应不同写法常用钩子如mounted用于DOM操作，beforeUnmount用于清理 keep-alive组件提供activated/deactivated专用钩子 CSS原子化样式：通过多个单一功能类组合实现样式新智ERP项目中存在手动维护的原子化样式 UnoCSS框架能自动生成按需使用的工具类提供布局、间距等常用样式预设，简化开发（148字）

2026-04-27 10:00:12 337

原创前端学习笔记（8）CSS两种布局、SCSS预处理器

本文总结了CSS两种主流布局方式(Flexbox和Grid)以及SCSS预处理器的核心知识点。Flexbox适用于一维布局，通过flex-direction、justify-content等属性控制主轴和交叉轴排列；Grid适用于二维布局，可精确控制行列结构。两者可嵌套使用，Flex适合单行/列布局，Grid适合矩阵布局。SCSS部分介绍了变量、计算和嵌套特性，对比了SCSS编译时变量与CSS运行时变量的区别，并演示了SCSS的颜色计算、选择器嵌套及&符号的用法，特别说明了如何用&实现BEM

2026-04-23 10:08:31 313

原创前端学习笔记（7） vue2 知识补充

和pinia不同，pinia用action记录所有对state修改的方法，但是vuex需要用action和mutation协作实现相同效果。近期接触了一个Vue2.7的项目，补充一些Vue2的相关知识。所有data内声明的变量+变量属性，均是响应式的。2026年4月14日 14:59。主要在script部分有区别。：处理业务逻辑，可以是异步的。：内存缓存的数据结构。：修改内存缓存的方法。

2026-04-19 15:18:49 41

原创前端学习笔记（6） vue两个版本、三种风格的比较

本文对比了Vue2和Vue3的三种开发风格（选项式、类组件、组合式），从代码组织结构、兼容性和核心语法等方面进行了详细比较。同时补充了Vue2的基础知识，包括选项式组件结构、响应式数据规则、非响应式情况处理以及路由跳转等核心概念。文章特别指出Vue2中响应式数据的特性和注意事项，为开发者提供了从Vue2过渡到Vue3的参考指南。

2026-04-16 13:35:17 347

原创前端学习笔记（5） typescript高级类型、装饰器

TypeScript高级特性摘要本文介绍了TypeScript的高级类型特性，主要包括：泛型：通过类型参数实现代码复用，支持类型约束和默认值实用类型：包括Partial、Record、Exclude和Extract等工具类型类型组合：联合类型(|)和交叉类型(&)的使用场景类型守卫：typeof和instanceof等类型判断方式条件类型：T extends U ? X : Y形式的类型推断声明文件：如何声明全局变量和类型装饰器：类装饰器、方法装饰器的实现和使用，以及装饰器工厂模式

2026-04-16 13:28:39 287

原创前端学习笔记（1） HTML、CSS、JS基本知识

这篇文章是关于前端学习的基础知识笔记，主要包含HTML、CSS和JavaScript三部分内容： HTML部分介绍了基本文档结构、常用元素（标题、段落、链接等）和属性（id、class、事件处理等），并提供了DOM树概念和JavaScript交互示例。 CSS部分讲解了样式表的基本语法、选择器类型、优先级规则，详细说明了背景、文本、链接等常见样式属性，以及display布局属性的各种用法。 JavaScript部分重点介绍了变量声明方式（const、let、var的区别）、函数定义等基础知识。文章以代码示

2026-04-15 23:38:12 32