xiangzhihong8的专栏

过去十年，Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持，成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级，Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场。

llms.txt是一种新的网站标准，建议在网站根目录放置一个名为llms.txt的 Markdown 文件。它就像给 AI 准备的一份网站“简介”，让 AI 能快速抓住网站重点。这个文件只保留网站最核心的内容，去掉了广告、复杂脚本等干扰项，使 AI 能更高效地理解和处理网站信息。。尤雨溪推荐的vitepress-plugin-llms插件，为 Vue 框架的文档生成提供了极大的便利。开发者只需简单的安装和配置，即可自动生成llms.txt和llms-full.txt文件。

打包构建中的代码拆分（Code Splitting）是一种优化技术，它将应用程序的代码拆分成多个小块（chunks），并在需要时按需加载这些代码块。当应用程序的代码被打包成一个单独的文件时，用户在访问应用程序时需要下载整个文件，这可能导致长时间的加载延迟。通过代码拆分，可以将应用程序的关键代码和初始加载所需的最小功能模块放在主文件中，而将其他代码块延迟加载。这样可以减少初始加载时间，使用户更快地看到应用程序的内容。应用程序通常具有多个页面或功能模块，用户在访问应用程序时并不总是需要加载所有的代码。

作为官方推荐的路由解决方案，React Router提供了丰富的功能集，包括基本的路由导航、嵌套路由、动态路由、路由懒加载、路由鉴权以及基于组件的路由配置、路由参数、通配符等。React Router是React生态系统中最流行的路由解决方案，它允许开发者在单页应用的不同页面之间进行切换，而不需要重新加载整个页面，React Router与React框架深度集成，使得开发者在单页面应用中进行页面切换时变得轻而易举。如果一个路由模式以 /* 结尾，后面的任意字符串都会匹配到，也包括其他的 /。

【代码】react router 7.0‘Redirect‘ is not exported from ‘react-router-dom‘

这个错误提示表明在你的项目中，Gemfile 中指定的 cocoapods 版本（要求版本 >= 1.13，但不能是 1.15.0 或 1.15.1）在当前配置的 gem 源中找不到。默认的 RubyGems 源可能没有你需要的版本，可以尝试更换或添加 gem 源。如果问题仍然存在，可以尝试手动安装指定版本的 CocoaPods。确保你的 Ruby 版本符合 CocoaPods 的要求。确保你的 Gemfile 中关于 cocoapods 的配置是正确的。

接下来，就可以在页面中使用该组件了，最重要的是controls，浏览器自带的控制条，如果controls导致没有播放按钮无法实现播放。完成插件的安装后，还需要在main.ts中注册vue-video-player。当然，我们也可以自定义controls。

vite-plugin-imagemin 是一款图片资源压缩插件，能够在打包的时候显著的降低图片资源占用。不过，在安装过程中我们遇到了如下的问题。完成依赖后，我们需要在vite.config.ts配置中添加图片压缩配置脚本。

Element Plus 是一个基于 Vue 3 的现代化 UI 组件库，旨在帮助开发者快速构建美观且功能丰富的 Web 应用程序。它提供了大量的 UI 组件，如按钮、表单、表格、弹出框、标签页、树形控件等，涵盖了 Web 应用开发中常见的大多数场景。本文通过一个实例来说明vue3+elementplus查询、展示和分页实战。

PAG是来自腾讯的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 的流程图下图所示，设计师在 AE 上设计出动画后，可以通过导出插件导出 pag 文件，同时 PAG 提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过 PAG SDK 加载渲染 PAG 动画。图片相比其他的动画方案，PAG动画有如下特点和优势：开源项目：无需担心团队维护问题。

对于前端大型项目来说，很容易产生性能问题。对于这些性能问题，最常见的解决方式是使用性能分析工具进行分析，然后再进行针对性的解决。

为确保在 100 毫秒内获得可见响应，RAIL 的准则是在 50 毫秒内处理用户输入事件，这也是为什么我们使用requestIdleCallback处理空闲回调任务时，timeRemaining()有一个 50ms 的上限时间。最简单的，我们可以设置每一次执行的耗时上限，当每个任务执行完之后，检测一下本次执行耗时，超过 50ms 则通过定时器或是requestAnimationFrame、requestIdleCallback等方法，将剩余任务放到下一次渲染前后处理。我们常用的事件监听的顺序则如下图。

卡顿，顾名思义则是代码执行产生长耗时，导致浏览器无法及时响应用户的操作。那么，我们可以基于不同的方案，来监测当前页面响应的延迟。

我们常说的 SSR是 指 Server-Side Rendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR 也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。

元素是众多广泛使用的网络 2D 图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将 canvas 画布推至极限，性能开始成为问题。

vue 在绝大多数情况下都推荐使用模板来编写 html 结构，但是对于一些复杂场景下需要完全的 JS 编程能力，这个时候我们就可以使用渲染函数 ，它比模板更接近编译器vue 在生成真实的 DOM 之前，会将我们的节点转换成 VNode，而 VNode 组合在一起形成一颗树结构，就是虚拟 DOM（VDOM）。我们之前编写的 template 中的 HTML 最终也是使用渲染函数生成对应的 VNode。

对于大多数的渲染场景，我们都可以使用浏览器的 Performance 来录制和分析性能问题，Performance 适用于针对某个具体、可复现的问题做分析。卡顿问题同样也是，我们可以在火焰图中看到一些长耗时的任务，然后再逐个分析具体的耗时问题出现在哪里，逐一解决。下面介绍一下一些常见耗时任务的优化方案。

前端页面加载的过程其实跟我们常常提起的浏览器页面渲染流程几乎一致：网络请求，服务端返回 HTML 内容。浏览器一边解析 HTML，一边进行页面渲染。解析到外部资源，会发起 HTTP 请求获取，加载 Javascript 代码时会暂停页面渲染。根据业务代码加载过程，会分别进入页面开始渲染、渲染完成、用户可交互等阶段。页面交互过程中，会根据业务逻辑进行逻辑运算、页面更新。那么，我们可以针对其中的每个步骤做优化，主要包括：资源获取、资源加载、页面可见、页面可交互。

对于前端开发来说，性能优化老生常谈了。不管是日常工作中，还是涉及到晋级答辩，性能都是频繁被我们提及的一个话题。性能优化不是一劳永逸的解决方案，项目在发展过程，代码不断地迭代和变更。我们在某个阶段优化过的代码，过段时间性能又会慢慢下降，这也是前端开发常把性能挂在嘴边的原因。当页面加载时间过长、交互操作不流畅时，会给用户带来很糟糕的体验。越是使用时间越长的产品，用户对体验的要求越高，如果出现卡顿或是加载缓慢，最坏的情况下会导致用户的流失。

Rollup作为一款轻量级且功能强大的前端构建工具，通过静态分析和插件系统提供了高效的代码打包和优化能力。正是因为它的这些特性，Vite才使用它作为生产环境的默认构建工具。

Yapi 曾经是 API 管理工具中的佼佼者，但由于停止维护，它现在已经不再适合大部分开发团队使用。相比之下，Apifox 不仅功能更强大，而且具备持续的更新和维护，完全可以成为 Yapi 的最佳替代品。对于那些追求高效、现代化开发流程的团队来说，选择 Apifox 不仅能解决当前问题，还能为未来的开发需求做好准备。

Vue.js，一个轻量级且易于上手的 JavaScript 框架，已经在全球范围内获得了广泛的应用。Vue.js 的状态管理库 Vuex，也为开发者提供了一个统一的状态管理方案。然而，随著 Vue.js 的发展和进化，我们看到了一个新的状态管理库的诞生 — Pinia。在这篇文章中，我们将探讨 Vuex 和 Pinia 的差异，并了解 Pinia 如何成为 Vue.js 状态管理的新选择。

从2014年发布到今年，Vue正好走过了10年，这10年也正好是前端发展的巨变之年，各种新的技术、框架、UI库 都层出不穷，今天我们来盘点一下2024年有哪些值得关注的 vue UI组件库。

这里面提到的standard也是一个代码风格检查工具，官网是：https://standardjs.com 看它的内容描述，这是一个类似eslint的东西，似乎比eslint更加简单。关键的内容就是其中的parserOptions.parser配置使用typescript语法插件的parser就可以正确识别项目中.vue文件的ts代码，根据eslint-plugin-vue官方的说明，我这里额外配置了一个vue-eslint-parser，因为我的项目需要配置下这个。然后在vue的函数中去使用它。

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios有以下特性：从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据。

随着前端技术的不断发展，vue作为一款开发框架也越来越受到开发者们的欢迎。而vue的路由机制也是vue框架中不可或缺的一部分。路由系统能够帮助开发人员构建复杂的单页应用，同时也提供了一种灵活的方式来管理页面状态和用户导航。在这种情况下，vue路由守卫便成为一个必须要掌握的知识点。那么，什么是Vue路由守卫呢？在Vue.js中，路由守卫是用来控制页面之间跳转的一种机制，主要用于在页面导航过程中进行权限验证和状态管理等操作。Vue路由守卫主要分为全局路由守卫、路由独享守卫和组件级别守卫三种类型。

Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。

题目：我们来实现一个最简单的需求，将一个元素从屏幕左边均匀地移动到屏幕右边。

APPium是一个开源测试自动化框架，适用于原生、混合或移动Web应用程序的自动化测试工具。APPium使用WebDriver协议驱动iOS、Android等应用程序。

在 Vue.js 中，事件修饰符是一种用于处理 DOM 事件的特殊指令，可以在事件处理程序中提供额外的控制或功能。Vue 中的事件修饰符是以 . 开头的指令后缀，常用的事件修饰符包括以下一些：.stop：阻止事件冒泡。.prevent：阻止事件的默认行为。.capture：使用事件捕获模式。.self：只当事件在该元素本身（比如不是子元素）触发时触发回调。.once：事件只触发一次。.passive：事件的默认行为立即执行，无需等待事件回调结束。

模块联邦允许Webpack构建之间的模块共享，它打开了一种新的方式来看待代码的复用和组合，尤其适合在微前端架构中使用。在微前端架构中，模块联邦使得每个微前端应用都可以暴露和共享自己的模块，供其他应用使用。这意味着你可以在一个微前端应用中定义一个组件或服务，然后在另一个微前端应用中直接使用它，而不需要复制代码或安装额外的依赖。代码拆分是动态加载的基础，它将应用的代码拆分成多个小的、独立的块（chunk），每个块可以独立地加载和执行。每个微前端应用都是独立的、可复用的，并且可以使用不同的技术栈进行开发。

Single-SPA是一个用于构建微前端应用的JavaScript框架。它允许你将一个大型前端应用拆分成多个独立的、可复用的微应用，并且这些微应用可以使用不同的框架或库进行开发。Single-SPA通过定义一套简单的生命周期钩子和路由机制，实现了微应用之间的通信和协同工作。

但需要注意的是，在 Vue 3 的 Composition API 写法里，数据或函数如果需要在 中使用，就必须在 setup 里将其 return 出去，而仅在 里被调用的函数或变量，不需要渲染到模板则无需 return。Composition API 虽然也是一个步伐迈得比较大的改动，但其组件结构并没有特别大的变化，区别比较大的地方在于组件生命周期和响应式 API 的使用，只要掌握了这些核心功能，上手 Vue 3 非常容易。可以看到 Vue 3 的组件也是 + + 的三段式组合，上手非常简单。

流程控制语句相对来说比较容易理解，主要就是包括了条件操作、循环操作，其中循环操作又分为了while循环和for循环，在我们已知了循环次数的情况下，建议使用for循环，在我们未知循环次数的情况下，可以使用while循环，因为while循环成立是需要一个条件，所以当条件满足的时候就继续循环。当条件不满足的时候就停止循环。

当将 “type”: “module” 添加到 package.json 中，Node.js 会将 .js 文件作为 ECMAScript Modules (ESM) 来处理。这与在 package.json 中设置 “type”: “module” 相类似，都是为了确保 Node.js 以 ESM 格式解析和执行模块。默认情况下 Node.js 默认将 .js 文件作为 CommonJS (CJS) 模块来处理。Vite 官方 Github 仓库下的 ISSUE：“

我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近，Vue3 的超前项目 Vue Macros 中，发布了 defineRender、setupComponent、setupSFC 这些新的 API，这代表了，以后 Vue3 有可能可以全面拥抱 JSX/TSX 了！！说这个新 API 之前，我们先来说说什么是 Vue Macros。

useFormState 将是简化服务器交互的关键，该挂钩管理表单提交状态并捕获服务器响应。实践中的实用性：想象一个登录过程，useFormState 可以立即显示服务器响应，例如「登录失败」消息，直接增强用户参与度和反馈。不需要通常的 useEffect + setMessage 组合。在使用中，useFormState 可以在表单操作期间处理服务器通信，轻松捕获和呈现服务器响应。

接口重复提交指的是在网络通信中，同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致，例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。接口重复提交可能会导致多种问题，当服务器收到重复请求时，可能会多次处理相同的数据，导致数据重复操作或者产生不一致的结果。重复提交请求会增加服务器的负载和资源消耗，特别是在高并发情况下，可能会导致服务器压力过大，影响系统的性能和稳定性。

微前端架构是为了在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用，如何运行，从而能选出适合自己项目的微前端方案。

在本文中，我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。我的目标是尽可能避免与其他软件交互（即使是专门用于 3D 建模的软件），并利用 Pro 可以提供的可能性。这个短暂的旅程分为三个不同的阶段：准备、组装和照明。我们必须使用一些布局可能性以及一些地理处理工具来准备某些图层，然后继续设计局部场景。我不是 3D 专家，也不是 Blender 或其他类似软件的熟练用户。我只是在探索新的方法并与你分享，期望得到一些积极的反馈和改进建议。