菠萝蜜

原创 Vite详细配置、打包流程（开发构建、线上构建、热更新）原理

Vite是一款创新的前端构建工具，由尤雨溪团队开发，专注于提升开发效率。其核心优势在于基于浏览器原生ES模块的架构，实现毫秒级热更新和即时服务器启动。主要特性包括极速启动、快速热更新、开箱即用的框架支持以及良好的扩展性。Vite采用双模式设计：开发环境利用按需编译机制，生产环境则使用Rollup进行优化打包。配置灵活，支持插件扩展，适合各类规模的项目开发。运行要求Node.js 18+或20+，通过依赖预构建优化性能，是现代前端开发的高效解决方案。

原创 webpack配置、打包流程及原理详解、 HMR 热更新

Webpack 是前端模块化打包工具，通过分析模块依赖关系，将多种资源（如 JS、CSS、图片）打包成生产环境资源。

原创 Tailwind CSS 3 安装配置

本文介绍了Vue3+Vite+TailwindCSS3的项目搭建流程：1）安装TailwindCSS及相关依赖；2）初始化配置文件；3）创建并引入CSS文件；4）优化Vite配置。使用注意事项包括：版本兼容性检查、正确配置postcss和tailwind配置、开发工具推荐、CSS动画实现以及生产环境性能优化。通过自定义tailwind.config.js可扩展主题色等功能。该方案能快速实现页面布局，同时利用Tailwind的摇树优化减小打包体积。

原创 Tailwind CSS 4 安装配置

摘要：本文详细介绍了如何配置Vue3+Vite+TailwindCSS4项目，包括使用Vite脚手架初始化Vue3+TS项目、安装TailwindCSS及Vite插件、修改Vite配置、创建Tailwind配置文件、导入样式文件等步骤。重点解决了配置过程中可能出现的报错问题，并提供了验证配置成功的方法。最后给出了TailwindCSS官方文档链接供参考。

原创 UnoCSS安装配置

UnoCSS 是一款基于原子化 CSS 的框架，通过即时生成类名来高效构建样式，无需编写复杂 CSS 代码。

原创 vue3中监听滚动条、让元素滚动到指定位置、监听元素尺寸变化

vue3中监听滚动条、让元素滚动到指定位置、监听元素尺寸变化

原创 vue3中组件通信mitt（兄弟间、任意组件间）

vue3中组件通信mitt（兄弟间、任意组件间）

原创 Vue使用new Blob()实现不同类型的文件下载导出

项目中后端返回的是文件上传成功生成的一个字符串，为了保证可以下载所有文件，需要对后缀进行截取进行判断然后取不同的new Blob，这里new Blob中后端直接返回的是文件流，所以直接用res进行获取。文件下载按钮，data中定义的我就没有写了哈，自己定义就好了。注意：responseType一定要指定类型。

原创 CSS函数大全

CSS（层叠样式表）以其强大的功能和简洁的语法为网页设计带来了无限可能。其中，CSS函数作为实现特定效果的关键工具，让开发者能够更加精细地控制元素样式。

原创 前端开发命名规范

导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last。交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span。表格类：table, tr, td, cell, row。

原创 Vue3中watch和watchEffect区别和用法

使用过 Vue 的小伙伴，不管时 Vue2 还是 Vue3，我相信你都用过 Vue 中的监听器。监听器的作用就和它的名字一样：用来监听某个东西是否发生变化！我们很多需求都会用到监听器 watch，但是 Vue2 和 Vue3 中的监听器的用法有些许不一样，这就让一些从 Vue2 转 Vue3 的小伙伴不太适应，所以，我们今天就来好好学一学 Vue3 中的监听器如何使用！

原创 优化 if-else if-else....

分支优化在各种语言中都有不同的实现方式和应用场景，本篇通过JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。观点1：压根不需要多此一举去优化它，并且优化后的代码因为多创建了一个对象/数组，对对象/数组进行检索反而比单纯的if else还是废性能。观点2：分支优化后的代码可读性/可维护性更好，并且引入对象/数组所带来的性能问题在当今时代根本不值一提。

原创 vue.config.js配置

vue.config.js是一个Vue CLI 3.x项目的配置文件，用于配置Vue项目的各种选项。根据您的实际需求，您可以在这个详细的配置文件中添加、删除或修改配置选项和插件配置。vue.config.js配置。

原创 vite.config.js 配置

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。根据您的实际需求，您可以在这个基本的配置文件中添加、删除或修改配置选项。vite.config.js 配置。在上面的配置文件中，我们使用。

原创 vite.config.ts配置

vite.config.ts配置vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

原创 JavaScript常用技巧

javaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。一些技巧，它们将帮助你成为更高效、更有效的 JavaScript 开发人员，每个技巧都有详细的解释和示例。

原创 tsconfig.json详细配置

tsconfig.json详细配置

原创 前端常见操作-持续更新

前端开发注意事项与技巧

原创 flex弹性布局汇总详解