VueUse--组合式API工具集

GitHub: https://github.com/vueuse/vueuse

vue3官方推荐的工具库，提供200+组合式API函数。其模块化架构和Typescript类型系统堪称模范，适合学习如何组织大型工具类项目。源码中重点研究 useStorage 的状态同步机制和 useEventListener 的事件管理设计

当你在浏览器输入localhost或127.0.0.1时,通常都能访问到本地运行的服务。他们看似可以互相转换，但背后存着本质区别。本文将深入探讨两者的差异与应用场景

核心本质：标示符类型不同

• localhost:主机名(Hostname).这是一个由操作系统或网络配置定义的特殊域名，专门指向本地计算机。
• 127.0.0.1:IPv4地址。这是IPv4协议中预留的回环地址(Loopback Address)，专门用于指代本机

痛点背景

先说说机票项目中遇到的困境

目前机票项目分为 H5 和PC两端，团队在维护多语言时主要通过在线 Excel 进行管理

• 一个Excel文件，H5和PC各自占一个sheet页
• 每次更新语言，需要先导出Excel，然后手动跑脚本生成语言文件，在拷贝到项目中

听起来还凑合，但随着项目规模的扩大，问题逐渐显现

1. Key命名混乱
   • 有的首字母大写，有的小驼峰、大驼峰混用
   • 没有统一规则，难以模块化管理。
2. 不支持模块化
   • 目前已有数千条Key
   • 查找、修改、维护都非常痛苦
3. 更新流程繁琐
   • 需要手动进入脚本目录，用node跑脚本
   • 生成后在手动复制到项目中

近年来微前端架构逐渐成为大型前端工程化的主流解决方案，在众多微前端框架中，microApp和wujie凭借其独特的设计理念脱颖而出。本文将从技术实现、性能表现、开发体验等维度进行深度对比

核心架构对比

沙箱机制

• microApp: 基于Proxy的运行时沙箱
  • 采用ES6 Proxy代理全局对象
  • 通过闭包隔离作用域链
  • 存在样式污染风险(需配合 Shadow DOM)
• wujie：WebComponents + iframe混合沙箱
  • 主应用使用 WebComponents容器
  • 子应用运行在iframe沙箱环境
  • 天然隔离Javascript、CSS作用域

前言

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署他们。这通常被称作微前端，但是不仅限于此

模块联邦的概念

前言

写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就会打开APP或跳转到App内的某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应页面？

就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。 哈哈，是不是觉得这种技术很神奇，今天我们就一起来看看它是如何实现的～

前言

在移动互联网浪潮下，前端开发者常常遭遇「桌面完美，移动翻车」的尴尬困境:静心设计的页面在手机端频繁出现内容阶段、页面抖动，甚至因浏览器工具栏的显隐引发「卫衣惨案」。这一切的罪魁祸首，往往是我们习以为常的CSS单位 height: 100vh --它在桌面端是「省心神器」，却在移动端成为「兼容性噩梦」

为什么 100vh在手机上会水土不服？动态变化的浏览器工具栏如何让布局「牵一发而动全身」？又有哪些CSS新特性能够根治这些顽疾？本文将深入解析移动端视口单位的底层逻辑，结合实战案例演示如何用 svh/lvh/dvh 替代传统 vh,让你的页面在手机端真正实现「丝滑适配」，同时附赠兼容性解决方案与选型指南，助你打造无懈可击的移动端体验

在Vite中使用环境变量定义的变量有两种典型方式，分别用户

• 在配置文件中(vite.config.ts/js)使用环境变量
• 在源码(如组件或业务文件)中使用环境变量

在vite.config.ts中使用环境变量

Vite会自动加载项目根目录下的.env文件(比如.env,.env.production, .env.development)等，你可以通过loadEnv来获取环境变量

示例

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
    // 加载环境变量，mode 是 'development', 'production'等
    const env = loadEnv(mode, process.cwd());

    return {
        base: env.VITE_PUBLIC_PATH, // 使用.env 文件中的 VITE_PUBLIC_PATH 变量
        define: {
            __APP_ENV__: JSON.stringify(env.VITE_APP_ENV) //  也可以手动注入全局变量
        }
    }
})

前言

Code Review是什么？

Code Review 通常简称CR，中文意思就是代码审查

一般来说 CR 只关心代码规范和代码逻辑，不关心业务

但是，如果CR的人是租场，建议有时间还是看下自己组内相关业务，能避免一些生产事故的发生

作为前端组长做 Code Review 有必要吗？

主要还是看公司业务情况吧，如果前端组长需求不多的情况，是可以做下CR，能避免一些生产事故

• 锻炼自己的 CR 能力
• 看看别人的代码哪方面写的更好，学习总结
• 和同事交流，加深联系
• 你做了CR,晋升和面试，不就有东西吹了不是

原文

背景

我们在使用vite进行打包时，经常会遇到这个问题：随着业务的展开，版本迭代，页面越来越多，第三方依赖也越来越多，打出来的包也越来越大。如果把页面都进行动态导入，那么烦死几个页面公用的文件都会进行独立拆包，从而导致大量chunk碎片的产生。许多chunk碎片体积都很小，比如1K,2K,3K,从而显著增加了浏览器的资源请求。

虽然可以通过rollupOptions.output.manualChunks定制分包策略，但是文件之间的依赖关系错综复杂，分包配置稍有不慎，要么导致初始包体积过大，要么导致出现循环依赖错误，因此心智负担很重。那么有没有自动化的分包机制来彻底解决打包碎片化的问题呢？