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

【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js

news 来源：原创 2025/7/12 16:00:21

🙋大家好！我是毛毛张!
🌈个人首页： 神马都会亿点点的毛毛张

🚩今天毛毛张分享的是关于如何快速🏃‍♂️搭建一个前端工程化的项目的环境搭建以及流程🌠

文章目录

1.前端工程化环境搭建🍉
- 1.1 什么是前端工程化
- 1.2 nodejs的简介和安装
- - 1.2.1 什么是Nodejs
  - 1.2.2 如何安装nodejs
- 3.2 npm 配置和使用
- - 3.2.1 npm 安装和配置
  - 3.2.2 npm 常用命令🥭
2.Vue3通过Vite实现工程化🍅
- 2.1 Vue3简介🍅
- 2.2 Vite的介绍
- 2.3 Vite创建Vue3工程化项目🫐
- - 2.3.1 Vite+Vue3项目的创建、启动、停止🍓
  - 2.3.2 Vite+Vue3项目的目录结构

1.前端工程化环境搭建🍉

1.1 什么是前端工程化

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。

1.2 nodejs的简介和安装

1.2.1 什么是Nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以方便地开发服务器端应用程序，如 Web 应用、API、后端服务，还可以通过 Node.js 构建命令行工具等。相比于传统的服务器端语言（如 PHP、Java、Python 等），Node.js 具有以下特点：
- 单线程，但是采用了事件驱动、异步 I/O 模型，可以处理高并发请求。
- 轻量级，使用 C++ 编写的 V8 引擎让 Node.js 的运行速度很快。
- 模块化，Node.js 内置了大量模块，同时也可以通过第三方模块扩展功能。
- 跨平台，可以在 Windows、Linux、Mac 等多种平台下运行。
Node.js 的核心是其管理事件和异步 I/O 的能力。Node.js 的异步 I/O 使其能够处理大量并发请求，并且能够避免在等待 I/O 资源时造成的阻塞。此外，Node.js 还拥有高性能网络库和文件系统库，可用于搭建 WebSocket 服务器、上传文件等。在 Node.js 中，我们可以使用 JavaScript 来编写服务器端程序，这也使得前端开发人员可以利用自己已经熟悉的技能来开发服务器端程序，同时也让 JavaScript 成为一种全栈语言。Node.js 受到了广泛的应用，包括了大型企业级应用、云计算、物联网、游戏开发等领域。常用的 Node.js 框架包括 Express、Koa、Egg.js 等，它们能够显著提高开发效率和代码质量。

1.2.2 如何安装nodejs

直接打开官网下载对应操作系统的LST版本
- 官网链接：https://nodejs.org/en
双击安装包进行安装，安装过程中遵循默认选项即可(或者参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。
定义一个app.js文件,cmd到该文件所在目录,然后在dos上通过node app.js命令即可运行

function sum(a,b){return a+b;
}
function main(){console.log(sum(10,20))
}
main()

3.2 npm 配置和使用

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven

3.2.1 npm 安装和配置

1.安装

安装node，自动安装npm包管理工具！

2.配置依赖下载使用阿里镜像

npm 安装依赖包时默认使用的是官方源，由于国内网络环境的原因，有时会出现下载速度过慢的情况。为了解决这个问题，可以配置使用阿里镜像来加速 npm 的下载速度，具体操作如下：
打开命令行终端，执行以下命令，配置使用阿里镜像：

npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com # 推荐

确认配置已生效，可以使用以下命令查看当前 registry 的配置：如果输出结果为 https://registry.npmmirror.com，说明配置已成功生效。

npm config get registry

如果需要恢复默认的官方源，可以执行以下命令：

npm config set registry https://registry.npmjs.org/

3.配置全局依赖下载后存储位置

在 Windows 系统上，npm 的全局依赖默认安装在 <用户目录>\AppData\Roaming\npm 目录下。如果需要修改全局依赖的安装路径，可以按照以下步骤操作：
1. 创建一个新的全局依赖存储目录，例如 D:\GlobalNodeModules。
2. 打开命令行终端，执行以下命令来配置新的全局依赖存储路径：
```
npm config set prefix "D:\GlobalNodeModules"
```
3. 确认配置已生效，可以使用以下命令查看当前的全局依赖存储路径：
```
npm config get prefix
```

4.升级npm版本

cmd 输入npm -v 查看版本
如果node中自带的npm版本过低！则需要升级至9.6.6！
```
npm install -g npm@9.6.6
```

3.2.2 npm 常用命令🥭

1.项目初始化

npm init
- 进入一个vscode创建好的项目中, 执行 npm init 命令后，npm 会引导您在命令行界面上回答一些问题,例如项目名称、版本号、作者、许可证等信息，并最终生成一个package.json 文件。package.json信息会包含项目基本信息！类似maven的pom.xml
npm init -y
- 执行，-y yes的意思，所有信息使用当前文件夹的默认值！不用挨个填写！

2.安装依赖 (查看所有依赖地址 https://www.npmjs.com )

npm install 包名或者 npm install 包名@版本号
- 安装包或者指定版本的依赖包(安装到当前项目中)
npm install -g 包名
- 安装全局依赖包(安装到d:/GlobalNodeModules)则可以在任何项目中使用它，而无需在每个项目中独立安装该包。
npm install
- 安装package.json中的所有记录的依赖

3.升级依赖

npm update 包名
- 将依赖升级到最新版本

4.卸载依赖

npm uninstall 包名

5.查看依赖

npm ls
- 查看项目依赖
npm list -g
- 查看全局依赖

6.运行命令

npm run 命令是在执行 npm 脚本时使用的命令。npm 脚本是一组在 package.json 文件中定义的可执行命令。npm 脚本可用于启动应用程序，运行测试，生成文档等，还可以自定义命令以及配置需要运行的脚本。
在 package.json 文件中，scripts 字段是一个对象，其中包含一组键值对，键是要运行的脚本的名称，值是要执行的命令。例如，以下是一个简单的 package.json 文件：
```
{"name": "my-app","version": "1.0.0","scripts": {"start": "node index.js","test": "jest","build": "webpack"},"dependencies": {"express": "^4.17.1","jest": "^27.1.0","webpack": "^5.39.0"}
}
```
scripts 对象包含 start、test 和 build 三个脚本：
- 当您运行npm run start时，将运行node index.js，并启动应用程序
- 运行npm run test时，将运行 Jest 测试套件
- npm run build将运行webpack 命令以生成最终的构建输出
总之，npm run 命令为您提供了一种在package.json文件中定义和管理一组指令的方法，可以在项目中快速且灵活地运行各种操作

2.Vue3通过Vite实现工程化🍅

2.1 Vue3简介🍅

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/
Vue的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM

VUE作者:尤雨溪

尤雨溪（Evan You），毕业于科尔盖特大学，前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript，从此被这门编程语言深深吸引，开启了自己的前端生涯。

2.2 Vite的介绍

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。
包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面：

快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力。
统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量。
代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑。
自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等。

2.3 Vite创建Vue3工程化项目🫐

2.3.1 Vite+Vue3项目的创建、启动、停止🍓

1 使用命令行创建工程

在磁盘的合适位置上,创建一个空目录用于存储多个前端项目
用vscode打开该目录
在vscode中打开命令行运行如下命令

npm create vite@latest

第一次使用vite时会提示下载vite，输入y回车即可，下次使用vite就不会出现了
注意：选择vue+JavaScript选项即可

2 安装项目所需依赖

cd进入刚刚创建的项目目录
npm install命令安装基础依赖

cd ./vue3-demo1
npm install

3 启动项目

查看项目下的package.json

{"name": "vue3-demo1","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"bootstrap": "^5.2.3","sass": "^1.62.1","vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","vite": "^4.3.2"}
}

npm run dev

> 5 停止项目 + 命令行上 ctrl+c

2.3.2 Vite+Vue3项目的目录结构

1.下面是 Vite 项目结构和入口的详细说明：

1684489112904

public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
6. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
7. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
8. utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。
Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

2.vite的运行界面

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：(package.json)

{"scripts": {"dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
}

运行设置端口号：(vite.config.js)

//修改vite项目配置文件 vite.config.js
export default defineConfig({plugins: [vue()],server:{port:3000}
})

都看到这了，不妨一键三连再走吧！

🌈欢迎和毛毛张一起探讨和交流！
联系方式点击下方个人名片

【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js

🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张 🚩今天毛毛张分享的是关于如何快速🏃‍♂️搭建一个前端工程化的项目的环境搭建以及流程🌠 文章目录 1.前端工程化环境搭建&#…...

编程日记 2025/7/12 16:00:21

4.CSS文本属性

4.1文本颜色 div { color:red; } 属性值预定义的颜色值red、green、blue、pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%) 4.2对齐文本 text-align 属性用于设置元素内文本内容的水平对齐方式。 div{ text-align:center; } 属性值解释left左对齐ri…...

编程日记 2025/7/10 10:38:12

【工具整理】WIN换MAC机器使用工具整理

最近公司电脑升级，研发同学统一更换了 Mac Book Pro 笔记版电脑，整理一下安装了那些软件以及出处，分享记录下～ 知识库工具 1、语雀网址：语雀，为每一个人提供优秀的文档和知识库工具语雀个人花园&…...

编程日记 2025/7/9 22:51:48

Elasticsearch向量检索需要的数据集以及768维向量生成

Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一：使用fromsize实现分页快速掌握Elasticsearch检索之二：滚动查询(scrool)获取全量数据(golang) Elasticsearch检索之三：官方推荐方案search_after…...

编程日记 2025/7/10 15:16:47

《小型支付商城系统》项目（一）DDD架构入门

目录 1.DDD架构 1.1充血模型 1.2领域模型 1.2.1实体 1.2.2值对象 1.2.3聚合 1.2.4领域服务 1.2.5工厂 1.2.6仓储（Repository） 2.DDD建模 3.DDD工程模型项目介绍：知识星球 | 深度连接铁杆粉丝，运营高品质社群&#xff…...

编程日记 2025/7/8 5:53:48

web课程设计--酷鲨商城-springboot和vue

文章目录页面截图技术分析数据库代码地址页面截图登陆页面: 分类列表添加分类轮播图列表添加轮播图商品列表添加商品信息技术分析前端使用 html页面的 vue.js（vue2）和element-ui绘制前端界面后台使用Springbootmybatis来实现crud。还有一…...

编程日记 2025/7/7 14:08:27

解决virtualbox克隆ubuntu虚拟机之后IP重复的问题

找遍了国内论坛，没一个能解决该问题的，所以我自己写个文章吧，真讨厌那些只会搬运的，污染国内论坛环境，搜一个问题，千篇一律。问题操作系统版本为"Ubuntu 24.04 LTS" lennytest1:~$ cat /etc…...

编程日记 2025/7/9 1:25:26

活动预告 |【Part1】Microsoft Azure 在线技术公开课：使用 Azure DevOps 和 GitHub 加速开发

课程介绍通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure DevOps 和 GitHub 加速开发”活动，了解迁移到 DevOps 所需的合适工具和…...

编程日记 2025/7/8 4:06:42

SpiderFlow平台v0.5.0之数据库连接

一、寻找lib目录安装方式在 SpiderFlow 平台中，连接数据库时需要指定数据库的 DriverClassName，并确保正确配置数据库驱动。通常，驱动文件（JAR 文件）需要放置在指定的文件夹中，以便 SpiderFlow 可以找到并…...

编程日记 2025/7/13 4:07:47

springboot集成阿里云短信服务

springboot集成阿里云短信服务一.阿里云账号准备流程:注册阿里云账号>短信服务>新增资质>新建签名>新建模版>申请秘钥>用代码测试 1.注册阿里云账号 2、登录成功后， ① 在首页搜索短信服务 ② 打开第一个搜索结果 ③ 免费开通 ④ 可以根据…...

编程日记 2025/7/13 4:08:41

Redis 实战篇 ——《黑马点评》（上）

《引言》在进行了前面关于 Redis 基础篇及其客户端的学习之后，开始着手进行实战篇的学习。因内容很多，所以将会分为【上中下】三篇记录学习的内容与在学习的过程中解决问题的方法。Redis 实战篇的内容我写的很详细，为了能写的更好也付出…...

编程日记 2025/7/11 7:06:43

Redis的生态系统和社区支持

Redis的生态系统和社区支持 1. Redis 生态系统 1.1 Redis核心 Redis 是一个高性能的内存存储系统，支持丰富的数据结构（如字符串、列表、集合、哈希和有序集合）。它的核心提供了：高性能数据存储：单线程模型支持每秒数百万级别的操作。多种数据结构：适用于多样化场景，如…...

编程日记 2025/7/12 8:11:57

基于C语言从0开始手撸MQTT协议代码连接标准的MQTT服务器，完成数据上传和命令下发响应(华为云IOT服务器)

文章目录一、前言二、搭建开发环境三、网络编程基础概念科普3.1 什么是网络编程3.2 TCP 和 UDP协议介绍3.3 TCP通信的实现过程四、Windows下的网络编程相关API介绍4.1 常用的函数介绍4.2 函数参数介绍4.3 编写代码体验网络编程五、访问华为云IOT服务器创建一个产品和设备5.2…...

编程日记 2025/7/11 21:24:07

什么是 GPT？Transformer 工作原理的动画展示

大家读完觉得有意义记得关注和点赞！！！ 目录 1 图解 “Generative Pre-trained Transformer”（GPT） 1.1 Generative：生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式（译注） 1.2 Pr…...

编程日记 2025/7/9 23:33:43

IDEA 编辑器自动识别 Dockerfile 类型高亮和语法提示

在 IDEA 中，如果项目里面的只有一个 Dockerfile文件时，那么此时使用打开这个文件都是 ok 的，支持语法高亮和关键词提示。如果我们有多个 Dockerfile 时， 比如 A_Dockerfile , B_Dockerfile , C_Dockerfile, 这个时候你会发现 IDE…...

编程日记 2025/7/8 19:26:47

AI知识库与用户行为分析：优化用户体验的深度洞察

在当今数字化时代，用户体验（UX）已成为衡量产品成功与否的关键指标之一。AI知识库作为智能客服系统的重要组成部分，不仅为用户提供快速、准确的信息检索服务，还通过用户行为分析，为产品优化提供了深度洞察。…...

编程日记 2025/7/13 4:02:54

什么是Redis哨兵机制？

大家好，我是锋哥。今天分享关于【什么是Redis哨兵机制？】面试题。希望对大家有帮助； 什么是Redis哨兵机制？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Redis 哨兵（Sentinel）机制是 Redis 提…...

编程日记 2025/7/9 20:17:57

JavaScript中如何创建对象

在JavaScript中，创建对象有多种方法。以下是几种常见的方式： 1. 对象字面量这是最直接和常用的创建对象的方法。使用花括号 {} 包围一组键值对来定义一个对象。 let person {name: "John",age: 30,greet: function() {console.log("…...

编程日记 2025/7/13 1:23:13

2025：OpenAI的“七十二变”？

朋友们，准备好迎接AI的狂欢了吗？🚀 是不是跟我一样，每天醒来的第一件事就是看看AI领域又有什么新动向？ 尤其是那个名字如雷贯耳的 OpenAI，简直就是AI界的弄潮儿，一举一动都牵动着我们这些“AI发…...

编程日记 2025/7/8 13:06:39

Mysql(MGR)和ProxySQL搭建部署-Kubernetes版本

一、Mysql(MGR) 1.1 statefulSet.yaml apiVersion: apps/v1 kind: StatefulSet metadata:labels:app: mysqlname: mysqlnamespace: yihuazt spec:replicas: 3serviceName: mysql-headlessselector:matchLabels:app: mysqltemplate:metadata:labels:app: mysqlspec:affinity:p…...

编程日记 2025/7/8 18:23:10

uni-app 多平台分享实现指南

uni-app 多平台分享实现指南在移动应用开发中，分享功能是一个非常常见的需求，尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时，可以通过一套代码实现跨平台的分享功能，涵盖微信小程序、H5、App 等多个平台。…...

编程日记 2025/7/13 4:00:29

Windows系统下载、部署Node.js与npm环境的方法

本文介绍在Windows电脑中，下载、安装并配置Node.js环境与npm包管理工具的方法。 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，其允许开发者使用JavaScript编写命令行工具和服务器端脚本。而npm（Node Package Manager）则…...

编程日记 2025/7/12 15:24:52

Typora 最新版本下载安装教程（附详细图文）

文章简介在当今快节奏的信息化时代，简洁高效的写作工具成为了每位内容创作者的必需品。而Typora，这款备受推崇的 Markdown 编辑器，正是为此而生。它采用无缝设计，去除了模式切换、预览窗口等干扰，带来真正的实时预览…...

编程日记 2025/7/8 10:25:35

将一个变量声明为全局变量比如：flag1=false；然后通过jQuery使用js一个方法，将它设置为不可修改

方法 1：使用 Object.defineProperty 通过 Object.defineProperty 将全局变量设置为只读属性。 // 声明全局变量 var flag1 false;// 使用 Object.defineProperty 将其设置为不可修改 Object.defineProperty(window, flag1, {configurable: false, // 不允许删除属…...

编程日记 2025/7/9 13:18:52

找不到qt5core.dll无法运用软件的解决办法

在运行某些软件或游戏时，部分用户会遇到电脑显示由于找不到qt5core.dll，无法继续执行代码的问题，下面就给大家分享几种简单的解决方法，轻松恢复软件正常运行。导致qt5core.dll缺失的原因 qt5core.dll是 Qt 应用程序框架的一部分…...

编程日记 2025/7/8 17:06:08

集线器，交换机，路由器，mac地址和ip地址知识记录总结

一篇很不错的视频简介基本功能从使用方面来说，都是为了网络传输的标识，和机器确定访问对象集线器、交换机和路由器常听到路由器和集线器，下面是区别： 集线器集线器：一个简单的物理扩展接口数量的物理硬件。…...

编程日记 2025/7/7 2:17:58

Javascript算法——回溯算法（组合问题）

相关资料来自《代码随想录》，版权归原作者所有，只是学习记录回溯回溯模板 void backtracking(参数) {if (终止条件) {存放结果;return;}for (选择：本层集合中元素（树中节点孩子的数量就是集合的大小）) {处理节点…...

编程日记 2025/7/10 13:09:18

【人工智能机器学习基础篇】——深入详解无监督学习之聚类，理解K-Means、层次聚类、数据分组和分类

深入详解无监督学习之聚类：如K-Means、层次聚类，理解数据分组和分类无监督学习是机器学习中的一个重要分支，旨在从未标注的数据中发现潜在的结构和模式。聚类（Clustering）作为无监督学习的核心任务之一，广…...

编程日记 2025/7/12 15:34:41

从0到机器视觉工程师（二）:封装调用静态库和动态库

目录静态库编写静态库使用静态库方案一方案二动态库编写动态库使用动态库方案一方案二方案三总结静态库静态库是在编译时将库的代码合并到最终可执行程序中的库。静态库的优势是在编译时将所有代码包含在程序中，可以使程序独立运行&…...

编程日记 2025/7/7 14:37:21

Mybatis的set标签，动态SQL

set标签常用于update语句中，搭配if标签使用 set标签的作用 1、会动态加上前置set关键字 2、可以删除无关的逗号示例代码： <update id"update">update employee<set><if test"name ! null">name #{name},<…...

编程日记 2025/7/12 23:47:21

机器学习-感知机-神经网络-激活函数-正反向传播-梯度消失-dropout

文章目录感知机工作流程神经网络区别各种各样的神经网络激活函数激活函数类型Sigmoid 函数ReLU函数Leaky ReLU 函数Tanh 函数正向传播反向传播梯度消失(gradient vanish)如何解决 Dropout使用 PyTorch实战神经网络算法(手写MNIST数字识别)viewsoftmax和log-softmaxcross-en…...

编程日记 2025/7/2 14:09:24

HTML5 时间选择器详解

HTML5 的时间选择器（Time Picker）允许用户通过图形界面选择时间。它通过设置 <input> 元素的 type 属性为 time 来实现。以下是关于 HTML5 时间选择器的详细讲解。 HTML5 时间选择器详解 1. 基本用法要创建一个时间选择器，只需使用…...

编程日记 2025/7/12 6:01:41

SSM-Spring-AOP

目录 1 AOP实现步骤（以前打印当前系统的时间为例） 2 AOP工作流程 3 AOP核心概念 4 AOP配置管理 4-1 AOP切入点表达式 4-1-1 语法格式 4-1-2 通配符 4-2 AOP通知类型五种通知类型 AOP通知获取数据获取参数获取返回值获取异常总结 5 …...

编程日记 2025/7/6 14:01:52

小红书笔记详情API分析及读取深度探讨

一、引言随着社交电商的蓬勃发展，小红书凭借其独特的社区氛围和强大的内容生产能力，吸引了大量用户和开发者。对于开发者而言，小红书提供的API接口是获取其丰富内容的重要途径。本文将对小红书笔记详情API进行深入分析，并详细阐…...

编程日记 2025/7/11 7:24:45

【Yarn】通过JMX采集yarn相关指标的Flink任务核心逻辑

通过JMX采集yarn相关指标的Flink任务核心逻辑文章目录通过JMX采集yarn相关指标的Flink任务核心逻辑通过jmx接口查询Yarn队列指标请求JMX配置项核心处理流程输出到kafka格式通过jmx接口查询ResourceManager核心指标请求JMX读取配置yaml配置文件核心处理逻辑输出Kafka格式彩蛋 …...

编程日记 2025/7/7 12:09:18

【网络安全】PostMessage：分析JS实现XSS

前言 PostMessage是一个用于在网页间安全地发送消息的浏览器 API。它允许不同的窗口（例如，来自同一域名下的不同页面或者不同域名下的跨域页面）进行通信，而无需通过服务器。通常情况下，它用于实现跨文档消息传递&…...

编程日记 2025/7/10 10:59:41

基于springboot的码头船只货柜管理系统 P10078

项目说明本号所发布的项目均由我部署运行验证，可保证项目系统正常运行，以及提供完整源码。如需要远程部署/定制/讲解系统，可以联系我。定制项目未经同意不会上传！ 项目源码获取方式放在文章末尾处注：项目仅供学…...

编程日记 2025/7/7 8:50:26

SpringMVC（二）原理

目录一、配置Maven（为了提升速度） 二、流程&&原理 SpringMVC中心控制器完整流程： 一、配置Maven（为了提升速度） 在SpringMVC（一）配置-CSDN博客的配置中，导入Maven会非…...

编程日记 2025/7/9 13:56:23

计算机网络：网络层知识点及习题（一）

网课资源： 湖科大教书匠 1、概述网络层实现主机到主机的传输，主要有分组转发和路由选择两大功能路由选择处理机得出路由表，路由表再生成转发表，从而实现分组从不同的端口转发网络层向上层提供的两种服务：面向连接…...

编程日记 2025/7/9 1:09:07

题解：A. Noldbach Problem

问题描述 Nick 对素数非常感兴趣。他阅读了有关 Goldbach Problem 的内容，了解到每个大于 2 的偶数都可以表示为两个素数的和。于是他决定创造一个新问题，称为 Noldbach Problem。 Noldbach 问题的定义如下： 如果一个素数 $p$ 满足&#x…...

编程日记 2025/7/10 18:34:02

ESP32S3 + IDF 5.2.2 扫描WiFi

ESP32S3 IDF 5.2.2 扫描WiFi 目录 1 资料 2 通过Wi-Fi库扫描附近的网络 2.1 通过idf命令创建工程 2.2 编写测试用例 2.3 优化测试用例 3 小结 1 资料在ESP平台基于IDF开发WiFi相关功能，主要就是基于IDF的Wi-Fi库进行二次开发。可供参考的官方资料&#xff…...

编程日记 2025/7/9 23:31:53

鸿蒙开发汇总

写在前面汇总贴，整理在开发过程中遇到的有趣的、不太好解决的问题，记录一下思考的过程及自己的解决方案。只做为技术分享，转载请标明出处。 ArkTs-this指向问题 ArkTs-Text组件长度计算不对的问题...

编程日记 2025/7/2 10:33:52

PDF阅读和编辑工具——xodo

本文给大家推荐一款好用的PDF阅读和编辑工具——xodo,一款免费的跨平台PDF阅读、编辑、批注工具。注意xodo PDF Reader是免费的，xodo PDF Studio是收费的，但是xodo PDF Studio功能多很多。...

编程日记 2025/7/4 14:36:49

QT-------------自定义插件和库

以下是一个使用 Qt 实现图表交互操作的示例，涵盖了自定义图表视图类、不同类型的柱状图和饼图等内容。实现思路自定义图表视图类：创建一个从 QChartView 派生的自定义类，用于处理图表的交互操作。主窗口设计初始化：在主窗口中…...

编程日记 2025/7/6 12:00:29

《云原生安全攻防》-- K8s安全配置：CIS安全基准与kube-bench工具

在本节课程中，我们来了解一下K8s集群的安全配置，通过对CIS安全基准和kube-bench工具的介绍，可以快速发现K8s集群中不符合最佳实践的配置项，及时进行修复，从而来提高集群的安全性。在这个课程中，我们将学习…...

编程日记 2025/7/12 12:04:53

PCA降维算法详细推导

关于一个小小的PCA的推导文章目录关于一个小小的PCA的推导1 谱分解 (spectral decomposition)2 奇异矩阵(singular matrix)3 酉相似(unitary similarity)4 酉矩阵5 共轭变换6 酉等价7 矩阵的迹的计算以及PCA算法推导8 幂等矩阵(idempotent matrix)9 Von Neumanns 迹不等式 [w…...

编程日记 2025/7/9 21:40:20

C++ 基础思维导图（一）

目录 1、C基础 IO流 namespace 引用、const inline、函数参数重载 2、类和对象类举例 3、内存管理 new/delete 对象内存分布内存泄漏 4、继承继承权限继承中的构造与析构菱形继承 1、C基础 IO流 #include <iostream> #include <iomanip> //…...

编程日记 2025/7/8 10:28:33

Excel文件恢复教程：快速找回丢失数据！

Excel文件恢复位置在哪里？ Excel是微软开发的电子表格软件，它为处理数据和组织工作提供了便捷。虽然数据丢失的问题在数字时代已经司空见惯，但对于某些用户来说，恢复未保存/删除/丢失的Excel文件可能会很困难，更不用说…...

编程日记 2025/7/7 11:52:52

人脑处理信息的速度与效率：超越计算机的直观判断能力

人脑处理信息的速度与效率：超越计算机的直观判断能力关键词： #人脑信息处理 Human Brain Information Processing #并行处理 Parallel Processing #视觉信息分析 Visual Information Analysis #决策速度 Decision Speed #计算机与人脑比较 Computer v…...

编程日记 2025/7/9 13:56:08

Spring Boot 中的 classpath详解

Spring Boot 中的 classpath 详解在开发 Spring Boot 应用时，理解 classpath 的概念对于配置、资源管理以及构建项目非常重要。特别是当我们使用 Maven 打包工具时，项目的资源文件在不同的阶段会被放置到不同的目录。本文将深入探讨 Spring Boot 中的 …...

编程日记 2025/7/12 19:49:39