title: 使用 setResponseStatus 函数设置响应状态码 date: 2024/8/25 updated: 2024/8/25 author: cmdragon excerpt: 通过 setResponseStatus 函数，你可以轻松地在 Nuxt.js 中...[2024/8/26]

??基础链接导航?? 服务器 → ?? 阿里云活动地址 看样例 → ?? 摸鱼小网站地址 学代码 → ?? 源码库地址 一、前言 在本系列文章的早期章节中，我们已经成功地购买了服务器并配置了MySQL、Redis等核心中间件。紧接着，我们不仅建立了后端服务，还开发了我们的首个爬虫程序...[2024/8/26]

前言 在现今的软件开发领域，Vue凭借其高效、灵活和易于上手的特性，成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言，使用现成的Vue后台管理系统模板无疑是一个明智之举。本文大姚将为你推荐5款开源、免费、开箱即用的Vue后台管理系统模板，帮助你快速启动项目，专注于业务逻辑...[2024/8/19]

前言 有的时候我们想要从服务端拿到数据后再去渲染一个组件，为了实现这个效果我们目前有几种实现方式： 将数据请求放到父组件去做，并且使用v-if控制拿到子组件后才去渲染子组件，然后将数据从父组件通过props传给子组件。 在子组件的onMounted中请求数据，并且使用v-if在子组件...[2024/8/19]

前言 今天推荐一款用 .NET 和 Vue3 实现的开源权限管理系统。它的界面清爽干净，功能强大，还具备灵活的角色权限分配功能，能够满足不同规模企业的管理需求。无论你是开发新手还是大神，都能轻松上手，快速搭建起自己的权限管理体系。别再犹豫了，赶快来试试吧！ 项目简介 Malus是海棠的意思，顾名...[2024/8/7]

前言 在一些特殊的场景中（比如低代码、减少小程序包体积、类似于APP的热更新），我们需要从服务端动态加载.vue文件，然后将动态加载的远程vue组件渲染到我们的项目中。今天这篇文章我将带你学会，在vue3中如何去动态加载远程组件。 欧阳写了一本开源电子书vue3编译原理揭秘，这本书初中级前端能...[2024/8/7]

为什么要为Vue3提供ioc容器 Vue3因其出色的响应式系统，以及便利的功能特性，完全胜任大型业务系统的开发。但是，我们不仅要能做到，而且要做得更好。大型业务系统的关键就是解耦合，从而减缓shi山代码的生长。而ioc容器是目前最好的解耦合工具。Angular从一开始就引入了ioc容器，因此在业...[2024/7/31]

业务场景描述 假设用户正在填写一个复杂的表单，由于表单内容繁多，用户花费了很长时间才填完。这时，如果Token已经过期，系统会让用户重新登录，这种体验显然是非常糟糕的。为了避免这种情况，我们需要在Token即将过期或已经过期时，自动刷新Token，而不影响用户正在进行的操作。 技术实现思路 一、...[2024/7/29]

在前端开发中，我们经常需要处理后端返回的大量数据。假设后端一次性返回10万条数据，直接在浏览器中处理和展示这些数据会导致性能问题，比如页面卡顿、内存占用过高等。本文将结合Vue项目实战，介绍如何有效地处理和展示大数据集的方法。 1. 后端数据处理 首先，确保后端在传输数据时是经过压缩的，可以大...[2024/7/29]

前言 接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。 基于这个核心思想，我们可以尝试来动手实现一下。 搭建静态服务器 基于koa搭建一个项目： ...[2024/7/29]

前言 最近在我的vue源码交流群有位面试官分享了一道他的面试题：vue3的ref是如何实现响应式的？下面有不少小伙伴回答的是Proxy，其实这些小伙伴只回答对了一半。 当ref接收的是一个对象时确实是依靠Proxy去实现响应式的。 但是ref还可以接收 string、n...[2024/7/29]

一、懒加载的基本概念 懒加载是一种按需加载技术，即在用户需要时才加载相应的资源，而不是在页面初始加载时一次性加载所有资源。这样可以减少页面初始加载的资源量，提高页面加载速度和用户体验。 二、Vue 中的懒加载 在 Vue.js 中，懒加载主要用于路由组件的按需加载。Vue Router 提供了...[2024/7/23]

前言 在写vue3编译原理揭秘电子书的时候，发现有不少粉丝还傻傻分不清楚什么是编译时？什么是运行时？这篇文章我们来让你彻底搞清楚编译时和运行时的区别。 关注公众号：【前端欧阳】，给自己一个进阶vue的机会 编译时 我将编译这个词语理解为翻译，这句话是什么意思呢？ 比如你要和一个老外沟通，你...[2024/7/22]

在 Vue 3 中，组件通信是一个关键的概念，它允许我们在组件之间传递数据和事件。本文将介绍几种常见的 Vue 3 组件通信方法，包括 props、emits、provide 和 inject、事件总线以及 Vuex 状态管理。 1. 使用 props 和 emits 进行父子组件通信 prop...[2024/7/19]

1. 错误消息格式 前后端消息传递时，我们可以通过 json 的 errors 字段传递错误信息，一个比较好的格式范例为： { errors: { global: ["网络错误"], pa word: ["至少需要一个大写字母", "至少需要八位字符"] } } e...[2024/7/13]

title: useCookie函数：管理SSR环境下的Cookie date: 2024/7/13 updated: 2024/7/13 author: cmdragon excerpt: 摘要：本文详述了useCookie函数在服务器端渲染(SSR)中的应用，包括读写Cook...[2024/7/13]

1. 字体图标与矢量图标 目前主要有两种图标类型：字体图标和矢量图标。 字体图标是在网页打开时，下载一整个图标库，通常可以通过特定标签例如 <i> 来使用，优点是方便地实现文字混排，缺点是包体积大，且难以自定义。 矢量图标本质是 <svg> 标签，包中只含有所需的图标...[2024/7/13]

title: 轻松掌握useAsyncData获取异步数据 date: 2024/7/12 updated: 2024/7/12 author: cmdragon excerpt: 摘要：本文详细介绍Nuxt.js中的useAsyncData组合式函数，它用于在服务端渲染(SSR...[2024/7/12]

插槽(slot) 插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式 一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明 1 基本案例 首先编写一个基本的案例，三个组件展示不同的数据类型   页面进...[2024/7/11]

前言 在今年的Vue Conf 2024大会上，沈青川大佬（维护Vue/Vite 中文文档）在会上介绍了他的新项目Vue Vine。Vue Vine提供了全新Vue组件书写方式，主要的卖点是可以在一个文件里面写多个vue组件。相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊...[2024/7/11]

前言 vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量，为此我们不得不使用c 变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量，这篇文章我们来讲讲vue是如何实现在style中使用scrip...[2024/7/8]

前言 众所周知，在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x，同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。注：...[2024/6/28]

前言 毫无疑问，组件通信是Vue中非常重要的技术之一，它的出现能够使我们非常方便的在不同组件之间进行数据的传递，以达到数据交互的效果。所以，学习组件通信技术是非常有必要的，本文将总结Vue中关于组件通信的八种方式，帮助大家在使用Vue的过程中更加得心应手！ 如果文中有不对、疑惑的地方，欢迎在评...[2024/6/28]

defineModel 同学已经转正 defineModel 在vue3.3中还是一个实验性功能, 但是经过一个学期的努力,该同学已经转正。 defineModel的简单介绍 defineModel() 返回的值是一个 ref。 它可以像其他 ref 一样被访问以及修改。 它能起到在父组件和...[2024/6/26]

前言 v-bind指令想必大家都不陌生，并且都知道他支持各种写法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将tit...[2024/6/25]

废话不多说(主要文笔比较差),直接上代码 一个简单的demo,如下 <img :src="orginalImgSrc" style="display: none;" cro Origin="Anonymous" @load="imgLoaded"> vue代码 im...[2024/6/19]

前言 我们每天写vue3代码的时候都会使用到setup语法糖，那你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？本文将围绕这些问题带你揭开setup语法糖的神秘面纱。注：本文中使用的vue版本为3.4.19。 关注公...[2024/6/14]

最近同事使用el-upload上传图片时出现一个问题，连续拍照多个图片的时候，循环调用接口上传会报错： ERR_UPLOAD_FILE_CHANGED，网上找了很多方案没有解决，下面是我自己的解决过程。 1. 问题描述 我们用的套壳Android，网页发布在远程服务器，Android壳安装在i...[2024/6/13]

Vue3简单项目流程分享——工作室主页 零、写在最前 以下是项目相关的一些链接： 源代码GitHub仓库（需要魔法上网）：仓库 网页示例（需要魔法上网）：网页示例 UI图（来源@设计师杨贺）：MasterGo主页 补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度...[2024/6/5]

title: Vue插槽与作用域插槽 date: 2024/6/1 下午9:07:52 updated: 2024/6/1 下午9:07:52 categories: 前端开发 tags: VueSlot ScopeSlot 组件通信 Vue2/3插槽 作用域API 动态插槽 插槽优...[2024/6/1]

开篇 在上一篇文章中，简单的对 Nue-CLI 的代码通过函数柯里化优化了一下，这一次来实现一个获取下载目录的功能。 背景 在 Nue-CLI 中，我现在实现的是 create 指令，这个指令本质就是首先拿到模板名称和版本号之后，然后去进行下载对应的模板，关于下载那么肯定要面临的问题就是如...[2024/6/1]

title: vue3组件通信与props date: 2024/5/31 下午9:00:57 updated: 2024/5/31 下午9:00:57 categories: 前端开发 tags: Vue3组件 Props详解 生命周期 数据通信 模板语法 Compositio...[2024/5/31]

前言 大家好，我是阿瓜。一个励志想成为艾弗森的前端瓜 ~ 我们已经分享了 radash 库中数组、对象等相关的方法，大家感兴趣的可以前往主页查看阅读； 或许你最近在某个地方听过或者看过 radash 这个词，它是一个typescript编写的方法库，如果你想试试使用它，我们有简单使用示例，直...[2024/5/31]

title: Vue.js条件渲染与列表渲染指南 date: 2024/5/26 20:11:49 updated: 2024/5/26 20:11:49 categories: 前端开发 tags: VueJS 前端开发 数据绑定 列表渲染 状态管理 路由配置 性能优化 ...[2024/5/27]

前言 好，经过上篇文章的介绍，已经可以有处理不同指令的能力了，接下来我们就来处理 vue create 指令，这个指令的本质就是从网络上下载提前准备好的模板，然后再自动安装模板中相关依赖。 所以实现 create 指令分为两步： 下载指定模板 安装模板中的依赖 先来看看官方的吧，我在...[2024/5/27]

前言 经过上一篇文章的梳理，实现了可以从 GitHub 上拉取模板项目名称，已经可以得知可使用的模板有哪些了，那么我觉得是不是要进行选择呢？所以这一篇文章就来实现终端用户交互，让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中，已经有人为我们封装好了一个库，叫做 inquir...[2024/5/27]

title: Vue 3入门指南 date: 2024/5/23 19:37:34 updated: 2024/5/23 19:37:34 categories: 前端开发 tags: 框架对比 环境搭建 基础语法 组件开发 响应式系统 状态管理 路由配置 第1章：Vue...[2024/5/24]

前言 在上一篇『手撕Vue-CLI』添加自定义指令中，已经实现了自定义指令的添加，但是指令还是比较简单的，只是简单的打印一句话，那么在实际运用场景中，可能会有更多的需求，比如可能需要在指令中传递参数，或者需要在指令中进行一些复杂的操作，那么这个时候我们就需要对指令进行处理了。 创建指令处理文...[2024/5/21]

前言 在上一篇 vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点，vue做的优化是将这些动态节点收集起来，然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢？答案是：当然有，对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的。 什么是...[2024/5/15]

写在前面 这部分真的感觉超级难，其实也不能说难，主要是真的想不到这个思路应该这么做，或者说他好厉害，他怎么知道该这么设计实现。 说下难点吧，我觉得后天逻辑还好，主要是前端部分真的需要点花点时间来思考，比如布局、交互设计的实现等等。 文档页面功能开发 1、任务拆解 增加文档页面，首页点击电...[2024/5/15]

开始 最近一直在使用 element-ui中的日期组件。 所以想对日期组件常用的做一个简单的总结； 1.处理日期组件选择的时候面板联动问题 2.限制时间范围 解除两个日期面板之间的联动 我们发现2个日期面板之间其实是有联动关系的； 开始时间面板和结束时间面板始终只能相邻； 不能出现开始时间...[2024/5/11]

前言 jquery时代更新视图是直接对DOM进行操作，缺点是频繁操作真实 DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了...[2024/5/6]

写在前面 自从上一篇文章发出来之后，不少小伙伴开始用VuePre 搭建自己的个人网站。 如果小伙伴也想用VuePre 零代码零成本搭建个人网站，可以看过来 传送门???? 怎么零代码零成本搭建个人网站 当然了，也有小伙伴私信问我： 还有没有其他博客框架推荐，VuePre 搭建起来的个人网...[2024/5/6]

Util UI 已经开发多年, 并在多家公司的项目使用. 不过一直以来, Util UI 存在一些缺陷, 始终未能解决. 最近几个月, Util 团队下定决心, 终于彻底解决了所有已知缺陷. Util 应用框架 UI 介绍 Util 应用框架 UI 建立在 Angular , Ng-Zor...[2024/4/29]

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后，已经可以在控制台中输入 nue --help 来查看帮助信息了，但是在帮助信息中只有 --version，--help 这两个指令，而 vue-cli 中还有很多指令，例如 create，serve，build 等等，所以本章将继...[2024/4/29]

前言 还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？ 文章的那个粉丝，面试官接着问了他另外一个v-model的问题。 面试官：vue3的v-model都用过吧，来讲讲。 粉丝：v-model其实就是一个语法糖，在编译时v-model会被编译成:mo...[2024/4/23]

其他章节请看： vue3 快速入门 系列 他API 前面我们已经学习了 vue3 的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2 和 vue3 的改变。 浅层响应式数据 shallowRef shallow 中文：“浅层的” shallowRef：浅的 ...[2024/4/23]

一、前期转杯 确保电脑上已安装 node.js。 可通过命令 npm --version进行查询，如果展示了版本号，则说明已安装，若提示 npm 不是有内部或外部命令，也不是可运行的程序，则说明未安装，可进入官网下载并进行安装。 确保已安装 Vue CLI。 可通过命令 vue --V 查看...[2024/4/19]

前言 最近有粉丝找到我，说被面试官给问懵了。 粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会...[2024/4/19]

一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack...[2024/4/19]