当前位置：首页 > news >正文

Vue 项目中运行 `npm run dev` 时发生的过程

news 来源：原创 2025/5/16 11:26:08

步骤1：找到「任务说明书」(`package.json`)

当你输入 npm run dev，系统首先会去查项目的 「任务说明书」（即 package.json 文件），看看 dev 这个任务具体要做什么。

示例代码（`package.json` 片段）：

{"scripts": {"dev": "vue-cli-service serve"}
}

解释：
这里的 "dev": "vue-cli-service serve" 就像说明书上写着：“当执行 dev 任务时，请启动 Vue 的开发服务器”。

步骤2：启动「代码加工厂」（开发服务器）

系统会运行 vue-cli-service serve，启动一个本地开发服务器。这个服务器相当于一个「实时加工厂」，负责两件事：

编译代码：把你的 Vue 代码（如 .vue 文件）加工成浏览器能看懂的 HTML/CSS/JS。
实时监听：当你修改代码时，自动重新加工并刷新页面。

比喻：

就像你写作业（写代码），旁边有一个「智能助手」（开发服务器），你一写完他就帮你检查错误、翻译成老师能看懂的语言（浏览器能运行的代码），并且你一改作业，他立刻更新。

步骤3：「加工厂」流水线操作

开发服务器内部会按顺序做以下事情：

读取配置：检查 vue.config.js（如果有），确认加工规则（比如用什么工具编译 CSS）。
处理依赖：把 import 的组件、第三方库（如 vue-router）全部打包到一起。
编译代码：
- 将 .vue 文件拆解成 HTML/JS/CSS。
- 用 Babel 把 ES6+ 代码转成旧版浏览器能运行的 JS。
- 处理 Sass/Less 等 CSS 预处理器。
启动服务器：默认在 http://localhost:8080 运行，自动打开浏览器。

示例终端输出：

 DONE  Compiled successfully in 2156msApp running at:- Local:   http://localhost:8080/- Network: http://192.168.1.5:8080/

步骤4：开启「热更新」模式

当你修改代码并保存时，开发服务器会：

局部更新：只重新编译修改的文件（而不是整个项目）。
无刷新替换：通过「热模块替换（HMR）」，在不刷新页面的情况下，替换修改的代码部分。

比喻：

就像修车时，只更换坏掉的零件（修改的代码），而不是把整辆车拆了重装。

完整示例流程

1. 项目结构：

my-vue-project/├── src/│   ├── App.vue│   └── main.js├── package.json└── vue.config.js

2. 运行命令：

cd my-vue-project
npm install   # 先安装依赖（如果还没装）
npm run dev  # 启动开发服务器

3. 结果：

浏览器自动打开 http://localhost:8080，显示你的 Vue 应用。
修改 App.vue 中的文字并保存 → 页面自动更新，无需手动刷新。

常见问题处理

问题1：端口被占用？

解决方法：修改启动端口

// package.json
"scripts": {"dev": "vue-cli-service serve --port 3000"
}

问题2：编译报错？

示例：如果你在代码中写了语法错误（比如漏了逗号）：

ERROR  Failed to compile with 1 errorModule Error: Missing comma in object literal.

解决方法：根据提示修正代码，保存后会自动重新编译。

总结

npm run dev = 启动「代码加工厂」+ 实时监控修改。
核心功能：编译代码、本地服务器、热更新。
开发体验：写代码 → 保存 → 立即看效果，高效无痛！ 🚀

Vue 项目中运行 `npm run dev` 时发生的过程

步骤1：找到「任务说明书」(package.json) 当你输入 npm run dev，系统首先会去查项目的「任务说明书」（即 package.json 文件），看看 dev 这个任务具体要做什么。示例代码（package.json 片段）…...

编程日记 2025/5/16 11:26:08

Python3（19）数据结构

在 Python 编程中，数据结构是组织和存储数据的重要方式，合理选择和使用数据结构能显著提升程序的效率和可读性。这篇博客通过丰富的代码示例深入学习 Python3 的数据结构知识，方便日后复习回顾。一、列表（List） 1.1…...

编程日记 2025/5/1 7:42:18

macOS 安装了Docker Desktop版终端docker 命令没办法使用

macOS 安装了Docker Desktop版终端docker 命令没办法使用 1、检查Docker Desktop能否正常运行。确保Docker Desktop能正常运行。 2、检查环境变量是否添加 1、添加环境变量如果环境变量中没有包含Docker的路径，你可以手动添加。首先，找到Docker的…...

编程日记 2025/5/16 11:11:27

VR 汽车线束培训：探索高效学习新路径

在汽车线束生产领域，VR 汽车线束培训对于新员工的成长至关重要，它是一个关键环节，直接影响着生产效率和产品质量。传统的培训方式，通常是新员工在老员工的指导下，通过实际操作来学习线束装配流程。这种方式不仅耗费大量…...

编程日记 2025/5/1 7:41:15

k8s术语之Deployment

Deployment为Pod和Replica Set(下一代Replication Controller)提供声明式更新您只需要在Deployment中描述您想要的目标状态是什么，Deployment controller就会帮您将Pod和ReplicaSet的实际状态改变到您的目标状态。您可以定义一个全新的Deployment Controller的职责…...

编程日记 2025/5/1 7:41:15

对js的Date二次封装，继承了原Date的所有方法，增加了自己扩展的方法，可以实现任意时间往前往后推算多少小时、多少天、多少周、多少月；

封装js时间工具概述该方法继承了 js 中 Date的所有方法；同时扩展了一部分自用方法： 1、任意时间往前推多少小时，天，月，周；参数1、2必填，参数3可选beforeDate(num,formatter,dateVal); befo…...

编程日记 2025/5/1 7:40:12

17、商品管理：魔药商店运营——React 19 CRUD实现

一、魔药商店的炼金基石 1. 魔药配方契约（数据模型设计） // 预言池契约（Supabase Schema） interface Potion { id: uuid, name: string, effect: healing | transformation | attack, stock: number, moonSensitive: boo…...

编程日记 2025/5/1 7:40:10

2025-04-30 AIGC-如何做短片视频

摘要: 2025-04-30 AIGC-如何做短片视频如何做短片视频: 一、画图修图 1.保存视频（无水保存） 2.文案提取（提取文案） 3. DeepSeek(提示词） 4.小梦Ai（图片视频） 5.修图Ai 6.扩图Ai 7.养生…...

编程日记 2025/5/1 7:38:05

【自然语言处理与大模型】如何获取特定领域的微调数据集？

在特定领域中，数据集通常由提出需求的一方提供。然而，在某些情况下，如果他们未能提供所需的数据，或者你正在独立开展一个项目，并且需要相应的数据来推进工作，这时你应该怎么办呢？本文提供一种思…...

编程日记 2025/5/1 7:38:04

6.3-2 func(A) 1 A.heap-sizeA.len 2 \quad for i ⌊ A . l e n 2 ⌋ \lfloor {A.len\over2}\rfloor ⌊2A.len⌋ downto 1 3 \qquad MAX-HEAPIFY(A,i) 对于第2行的循环控制变量i来说，为啥要求它是从 ⌊ A . l e n 2 ⌋ \lfloor {A.len\over2}\rfloor ⌊2A.len⌋…...

编程日记 2025/5/1 7:38:04

论文阅读：2024 ACM SIGSAC Membership inference attacks against in-context learning

总目录大模型安全相关研究：https://blog.csdn.net/WhiffeYF/article/details/142132328 Membership inference attacks against in-context learning https://arxiv.org/pdf/2409.01380 https://www.doubao.com/chat/4030440311895554 速览这篇论文主要研究了…...

编程日记 2025/5/1 7:37:02

读论文笔记-CoOp：对CLIP的handcrafted改进

读论文笔记-Learning to Prompt for Vision-Language Models Problems 现有基于prompt engineering的多模态模型在设计合适的prompt时有很大困难，从而设计了一种更简单的方法来制作prompt。 Motivations prompt engineering虽然促进了视觉表示的学习&#xff0c…...

编程日记 2025/5/11 14:55:46

国产化海光C86架构服务器安装windows实录

最近几年与红蓝关系急转直下，尤其是科技领域尤为突出。随之而来的就是软硬件的国产化大潮。由于行业的原因根据要求必须使用国产化服务器、国产化操作系统、国产化数据库、国产化中间件。虽然闭关锁国断开红蓝联系可以在一定程度激发国产化发展，但是不得…...

编程日记 2025/5/1 7:35:59

基于SpringBoot的旅游网站的设计与实现

资源详情： 私信我或点击链接获取： 基于SpringBoot的旅游网站的设计与实现资源-CSDN文库摘要随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势，旅游网站当然也不能排除在外…...

编程日记 2025/5/1 7:35:59

【Axure教程】增删改饼图

今天教大家制作增删改饼图的原型模版，该模版是用Axure原生元件制作的，所以不需要联网或者调用外部接口，使用也很方便，默认数据在中继器表格里填写，默认支持20个不同颜色的扇形，后续可根据实际需要自己增加扇…...

编程日记 2025/5/1 7:35:58

FastAPI系列12：使用JWT 登录认证和RBAC 权限控制

使用JWT 登录认证和RBAC 权限控制 1、身份认证（Authentication）与JWT身份认证（Authentication）的方式JWT（JSON Web Token）的实现原理 2、授权（Authorization）与RBAC授权（…...

编程日记 2025/5/1 7:34:54

定时任务xxl-job国产化改造，适配磐维数据库（PostgreSQL）

前言因公司要求系统需要全面国产化改造，其中也涉及到定时任务xxl-job的改造。使用的xxl-job版本为：2.5.0 一、修改配置 1、修改pom.xml，引入postgresql组件 <dependency><groupId>org.postgresql</groupId><artif…...

编程日记 2025/5/1 7:34:54

2025华东杯ABC题赛题已出速拿

2025华东杯ABC题赛题已出速拿 A: B: C:...

编程日记 2025/5/1 7:33:51

PostgreSQL事务与并发清理

1.并发清理概述清理过程为指定的表，或数据库中的所有表执行以下任务。 1. 移除死元组移除每一页中的死元组，并对每一页内的活元组进行碎片整理。移除指向死元组的索引元组。 2. 冻结旧的事务标识（txid） 如有必要&#xf…...

编程日记 2025/5/1 7:33:50

基于DeepSeek与HTML的可视化图表创新研究

一、研究背景在当今数字化时代，数据呈指数级增长，广泛渗透于社会各个领域。无论是商业运营、科学研究，还是公共管理等方面，海量数据蕴含着丰富的潜在价值，成为驱动决策优化、推动业务发展、促进科学创新的关键要素。数…...

编程日记 2025/5/1 7:32:47

游戏引擎学习第250天:# 清理DEBUG GUID

设置阶段，重新开始清理调试层今天，我们将继续进行之前未完成的任务，主要是清理调试层的代码，并为其在游戏中使用做好准备。昨天我原本准备清理一些代码，但没能完成，所以今天我们将从那里开始，…...

编程日记 2025/5/1 7:32:46

删除k8s某命名空间，一直卡住了怎么办？

以 kubectl delete ns cert-manager 命令卡住为例，并且命名空间一直处于 Terminating 状态，说明 Kubernetes 无法完成删除操作，通常是因为 Finalizers 阻塞或某些资源无法正常清理。解决方法 1. 检查命名空间状态 kubectl get ns cert-man…...

编程日记 2025/5/1 7:32:45

聊一聊接口自动化测试断言处理策略

目录一、断言设计原则 1.1精准性 1.2可维护性 1.3容错性二、常见断言类型及实现 2.1基础验证 2.2响应体验证 2.3业务逻辑验证 2.4异常场景验证 2.5数据库断言三、断言策略 3.1 精准断言 vs 模糊断言 3.2关键字段优先 3.3数据动态处理四、多断言处理 4.1单用…...

编程日记 2025/5/1 7:32:44

C# 实现列式存储数据

C#实现列式存储数据指南一、列式存储概述列式存储(Columnar Storage)是一种数据存储方式，它将数据按列而非行组织。与传统的行式存储相比，列式存储在以下场景具有优势： 分析型查询：聚合计算、分组统计等操作效率更高…...

编程日记 2025/5/1 7:31:43

vscode中设置eslint保存时自动格式化未生效

vscode中设置eslint保存时自动格式化未生效设置一设置二上述设置二未勾选导致未生效...

编程日记 2025/5/1 7:31:42

力扣HOT100——207.课程表

你这个学期必须选修 numCourses 门课程，记为 0 到 numCourses - 1 。在选修某些课程之前需要一些先修课程。先修课程按数组 prerequisites 给出，其中 prerequisites[i] [ai, bi] ，表示如果要学习课程 ai 则必须先学习课程 bi 。例如…...

编程日记 2025/5/1 7:31:41

开源协议全解析：类型、选择与法律风险规避指南

[TOC] 在当今开源软件主导的技术生态中，开源协议（Open Source License）是决定项目能否被商业使用、二次开发的关键法律文件。据统计，GitHub上超过70%的项目使用某种形式的开源协议，但其中近30%存在协议兼容性问题。本…...

编程日记 2025/5/1 7:30:39

Android学习总结之自定义view设计模式理解

面试题 1：请举例说明自定义 View 中模板方法模式的应用考点分析此问题主要考查对模板方法模式的理解，以及该模式在 Android 自定义 View 生命周期方法里的实际运用。回答内容模板方法模式定义了一个操作的算法骨架，把一些步骤的实现延…...

编程日记 2025/5/1 7:30:39

Kubernetes Ingress 深度解析

Kubernetes Ingress 深度解析一、Ingress 基本概念 Ingress 是 Kubernetes 中管理外部访问集群服务的 API 对象，提供 HTTP/HTTPS 路由规则，实现以下功能： 基于域名/路径的路由TLS/SSL 终止负载均衡流量控制与传统服务的区别特性Ingre…...

编程日记 2025/5/1 7:30:37

rk3568安全启动功能实践

本文主要讲述笔者在rk3568芯片上开发安全启动功能实践的流程。其中主要参考瑞芯微官方文档《Rockchip_Developer_Guide_Secure_Boot_for_UBoot_Next_Dev_CN.pdf》。文档中描述逻辑不是很清晰而且和当前瑞芯微的sdk中安全启动的流程匹配度不高。本文就不再对瑞芯微官方文档的内容…...

编程日记 2025/5/1 7:30:36

transformer-实现解码器Decoder

Decoder 论文地址 https://arxiv.org/pdf/1706.03762 Decoder结构介绍 Transformer Decoder是Transformer模型的核心生成组件，负责基于编码器输出和已生成内容预测后续token。通过堆叠多层结构相同的解码层（Decoder Layer），每层包…...

编程日记 2025/5/1 7:30:36

iOS RunLoop 深入解析

本文深入探讨 iOS 中 RunLoop 的实现原理、工作机制以及实际应用。通过源码分析和实际案例，帮助读者全面理解 RunLoop 在 iOS 系统中的重要作用。一、RunLoop 基础概念 1. RunLoop 的定义与作用 RunLoop 是 iOS 系统中用于处理事件和消息的循环机制。它负责管理线…...

编程日记 2025/5/1 7:29:33

软考中级-软件设计师数据结构(手写笔记）

第一章：基础基础知识五大特性第二章：线性表第三章：栈和队列队列广义表第四章：树和二叉树基础知识树转二叉树和二叉排序树哈夫曼树线索二叉树和平衡二叉树第五章：图基础知识和邻接矩阵和邻接表图的遍…...

编程日记 2025/5/1 7:29:33

/var/log/sssd/` 目录解析

/var/log/sssd/ 是 System Security Services Daemon (SSSD) 的专用日志目录，用于记录与身份认证、用户/组信息查询、缓存管理等相关的操作。以下是该目录的详细解析： 1. 目录结构默认情况下，/var/log/sssd/ 包含以下日志文件： /var/log/sssd/ ├── sssd.log …...

编程日记 2025/5/1 7:29:32

C++负载均衡远程调用学习之Reactor事件触发机制

目录 1.LARV0.2-REACTOR_BUF实现 2.LARV0.2-outpu_buf实现 3.LARV0.2-reactor继承内存管理 4.LARV0.2流程总结 5.LARV0.3-多路IO事件的分析 6.LARV0.3_io_event和event_loop定义 7.LARV0.3_event_loop添加一个事件 8.LARV0.3_event_loop的epoll_wait封装 9.LARV0.3-eve…...

编程日记 2025/5/6 2:34:09

将uni-app前端项目发布到微信小程序体验版

1、修改后端接口调用地址 const REQUEST_CONST {BASE_URL:https://11.22.33.44:9090, } export default REQUEST_CONST 2、登录微信小程序平台，获取AppID 3、配置微信小程序AppID 在项目根目录下找到manifest.json文件，配置微信小程序相关的参数 4、…...

编程日记 2025/5/1 7:28:29

深入理解CSS显示模式与盒子模型

一、CSS显示模式：元素的“性格”决定布局 1. 显示模式基础 CSS显示模式（display属性）决定了元素在页面中的排列方式和尺寸表现。常见的显示模式有三大类型： 2. 块级元素（Block） 特点：独占一…...

编程日记 2025/5/1 7:28:28

突破SQL注入字符转义的实战指南：绕过技巧与防御策略

在渗透测试中，SQL注入始终是Web安全的重点攻击手段。然而，当开发者对用户输入的特殊字符（如单引号、反斜杠）进行转义时，传统的注入方式往往会失效。本文将深入探讨如何绕过字符转义限制，并给出防御建议。目…...

编程日记 2025/5/1 7:27:25

java网络原理5

一、网络地址转换（NAT） 1. 原理 - NAT 用于解决 IP 地址不够用的问题 ，将 IP 地址分为外网 IP（公网 IP）和内网 IP（私网 IP）。内网 IP 如 10.、172.16 - 172.31.、192.168.* 等，家用…...

编程日记 2025/5/1 7:27:24

一种基于光源评估并加权平均的自动白平衡方法（一）

在之前的博文如何在白平衡标定种构建不同类型的白平衡色温坐标系作为实例说明的白平衡色温坐标系的构建中，利用的如下映射矩阵构建色温坐标系：按照上述论文的说明，是不能直接把Raw域中的每块的RGB带入公式...

编程日记 2025/5/1 7:27:23

基于Docker Compose的Prometheus监控系统一键部署方案

前言在当今的云原生时代，系统监控已经成为保障业务稳定运行的重要基石。本文旨在提供一个完整的解决方案，帮助您快速搭建一个功能强大的监控系统。通过Docker Compose实现一键部署，结合Prometheus、Grafana、cAdvisor和node-exporter等优秀开源工具，构建一个完整的监控体…...

编程日记 2025/5/1 7:26:20

服务器丢包率测试保姆级教程：从Ping到网络打流仪实战

测试服务器丢包率是网络性能诊断的重要环节，丢包通常由网络拥塞、硬件故障、配置错误或线路质量差导致。以下是多种测试方法的详细步骤和工具说明： 一、基础工具测试（无需专业设备） 1. 使用 ping 命令命令示例： bash…...

编程日记 2025/5/1 7:26:19

家庭服务器IPV6搭建无限邮箱系统指南

qq邮箱操作 // 邮箱配置信息 // 注意：使用QQ邮箱需要先开启IMAP服务并获取授权码 // 设置方法：登录QQ邮箱 -> 设置 -> 账户 -> 开启IMAP/SMTP服务 -> 生成授权码服务器操作 fetchmail 同步QQ邮箱 nginx搭建web显示本地同步过来的邮箱 ssh…...

编程日记 2025/5/1 7:26:18

Ubuntu ZLMediakit的标准配置文件（rtsp-＞rtmp-＞hls）

最近在工作中遇到不生成hls资源的问题，后面发现是配置文件有误，特此记录正确的config.ini配置文件，方便查阅。最终解决方案，通过下面这种格式可以访问到flv视频，具体为什么不太清楚，rtmp格式：rtmp://39.113.48.113:8089/live/1744168516937396175 记录最终解决方案：ht…...

编程日记 2025/5/1 7:26:18

Android 移动开发：ProgressBar（转圈进度条）

目录 Android 移动开发：ProgressBar（转圈进度条）控件实战介绍 📂 文件说明 🧾 activity_main.xml（布局文件，XML） 🧾 MainActivity.java（逻辑代码&#xf…...

编程日记 2025/5/1 7:26:17

CSS：选择器-复合选择器

文章目录 1、交集选择器 1、交集选择器 <style>/* 选中类名为rich的元素*/.rich {color: gold;}/* 选中类名为beauty的元素*/.beauty {color: red;}/* 选中类名为beauty的p元素，这种形式（元素配合类选择器）以后用的很多！&am…...

编程日记 2025/5/1 7:26:16

Kafka-可视化工具-Offset Explorer

安装： 下载地址：Offset Explorer 安装好后如图： 1、下载安装完毕，进行新增连接，启动offsetexplorer.exe，在Add Cluster窗口Properties 选项下填写Cluster name 和 kafka Cluster Version Cluster name (集…...

编程日记 2025/5/1 7:26:16