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

vue辅助工具（vue系列二）

news 来源：原创 2025/9/16 21:03:54

目录

  • 第一章、安装周边库
    • 1.1）状态管理：Pinia
    • 1.2）路由管理：Router
    • 1.3）HTTP 客户端：Axios
    • 1.4）UI 组件库：Element
  • 第二章、下载Vue插件并安装
    • 2.1）安装开发者工具
      • 2.1.1）浏览器Vue.js devtools下载插件
      • 2.1.2）安装插件
      • 2.1.3）验证是否安装成功

友情提醒:

先看目录，了解文章结构，点击目录可跳转到文章指定位置。

第一章、安装周边库

1.1）状态管理：Pinia

安装：Pinia (npm install pinia)，流行的状态管理库，相比 Vuex 更轻量、更简单，API 设计更符合 Composition API 的风格

①执行以下命令

npm install pinia

②在 dependencies 字段中查找 pinia。
如果找到了 pinia 并且有版本号，说明 Pinia 已经成功安装。
在这里插入图片描述

1.2）路由管理：Router

安装：Vue Router (npm install vue-router)Vue 官方的路由管理器，用于构建单页面应用 (SPA)，实现页面间的导航和跳转。
①执行以下命令

npm install vue-router

②验证方法同pinia相同

1.3）HTTP 客户端：Axios

安装：Axios (npm install axios)一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求，与后端 API 进行交互。 功能强大，支持拦截器、取消请求等高级特性。
①执行以下命令

npm install axios

②验证方法同pinia相同

1.4）UI 组件库：Element

安装：Element Plus (npm install element-plus)一套基于 Vue 3 的 UI 组件库，提供丰富的 PC 端组件，风格统一、美观易用。
①执行以下命令

npm install element-plus

②验证是否安装成功
在这里插入图片描述

第二章、下载Vue插件并安装

2.1）安装开发者工具

2.1.1）浏览器Vue.js devtools下载插件

Chrome浏览器安装Vue.js devtools插件
1、浏览器访问极简插件

在这里插入图片描述

2、右上角搜索框搜索vue.js DevTools插件
在这里插入图片描述

3、在本地解压刚刚下载的插件，解压后如图：
在这里插入图片描述
4、打开谷歌浏览器–更多工具–拓展程序
注意：打开开发者模式
在这里插入图片描述

2.1.2）安装插件

将解压的文件拖入拓展程序页面安装
在这里插入图片描述

2.1.3）验证是否安装成功

安装后可以在谷歌商店看到已安装
在这里插入图片描述
访问vue网站时，点击F12，可进入调试界面
在这里插入图片描述

相关文章：

vue辅助工具（vue系列二）

目录 第一章、安装周边库1.1）状态管理：Pinia1.2）路由管理：Router1.3）HTTP 客户端：Axios1.4）UI 组件库：Element 第二章、下载Vue插件并安装2.1）安装开发者工具2.1.1&#…...

编程日记 2025/9/16 21:03:54

WPF 五子棋项目文档

WPF 五子棋项目文档 1. 项目概述 本项目是一个使用 Windows Presentation Foundation (WPF) 技术栈和 C# 语言实现的桌面版五子棋（Gomoku）游戏。它遵循 MVVM（Model-View-ViewModel）设计模式，旨在提供一个结构清晰、可…...

编程日记 2025/9/11 10:30:02

UniApp 实现兼容 H5 和小程序的拖拽排序组件

如何使用 UniApp 实现一个兼容 H5 和小程序的 九宫格拖拽排序组件&#xff0c;实现思路和关键步骤。 一、实现目标 支持拖动菜单项改变顺序拖拽过程实时预览移动位置拖拽松开后自动吸附回网格兼容 H5 和小程序平台 二、功能结构拆解以及完整代码 完整代码&#xff1a; <…...

编程日记 2025/9/14 18:08:23

谷歌推出统一安全平台-一个平台实现跨云网端主动防护

&#x1f44b; 今天要给大家带来一个超级棒的消息&#xff01;谷歌云推出了全新的“谷歌统一安全平台”&#xff0c;感觉我们的网络安全问题有救啦&#xff01;&#x1f604; 随着企业基础设施变得越来越复杂&#xff0c;保护它们也变得越来越难。攻击面不断扩大&#xff0c;安…...

编程日记 2025/9/1 14:33:41

众趣科技丨沉浸式 VR 体验，助力酒店民宿数字化营销宣传

随着旅游季的到来&#xff0c;各地的旅游景区开始“摩拳擦掌”推出各种活动&#xff0c;吸引更多游客来此游玩。 自去年以来&#xff0c;冰雪游热度持续上升&#xff0c;尤其是对于满心期待的南方游客来说&#xff0c;哈尔滨仍是冰雪旅游的热门目的地。据美团数据显示&#xff…...

编程日记 2025/9/9 9:10:00

DAY05：【pytorch】图像预处理

1、torchvision 功能&#xff1a;计算视觉工具包 torchvision.transforms&#xff1a;常用的图像预处理方法torchvision.datasets&#xff1a;常用数据集的 dataset 实战&#xff0c;MINIST&#xff0c;CIFAR-10&#xff0c;ImageNet等torchvision.model&#xff1a;常用的模…...

编程日记 2025/9/16 20:59:02

真实企业级K8S故障案例：ETCD集群断电恢复与数据保障实践

背景描述 某跨境电商平台生产环境使用Kubernetes&#xff08;v1.23.17&#xff09;管理500微服务。某日机房突发市电中断&#xff0c;UPS未能及时接管导致&#xff1a; 3节点ETCD集群&#xff08;v3.5.4&#xff09;全部异常掉电 Control-Plane节点无法启动api-server 业务P…...

编程日记 2025/9/15 4:26:12

rbd块设备的id修改

背景 看到有这个需求&#xff0c;具体碰到什么场景了不太清楚&#xff0c;之前做过rbd的重构的研究&#xff0c;既然能重构&#xff0c;那么修改应该是比重构还要简单一点的&#xff0c;我们具体看下怎么操作 数据结构分析 rbd的元数据信息 [rootlab104 ~]# rbd create tes…...

编程日记 2025/9/9 1:32:19

WP最主题专业的wordpress主题开发

WP最主题&#xff08;wpzui.com&#xff09; WP最主题是一个提供高品质WordPress主题的平台。它注重主题的设计和功能&#xff0c;旨在为用户提供美观且实用的主题选择。其主题通常具有良好的用户体验、丰富的自定义选项以及优化的性能&#xff0c;能够满足不同类型的网站搭建…...

编程日记 2025/9/16 21:01:18

HomeAssistant本地化部署结合内网穿透打造跨网络智能家居中枢

文章目录 前言1. 添加镜像源2. 部署HomeAssistant3. HA系统初始化配置4. HA系统添加智能设备4.1 添加已发现的设备4.2 添加HACS插件安装设备 5. 安装cpolar内网穿透5.1 配置HA公网地址 6. 配置固定公网地址 推荐 ​ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂…...

编程日记 2025/9/16 20:59:05

# 实时人脸性别与年龄识别：基于OpenCV与深度学习模型的实现

实时人脸性别与年龄识别&#xff1a;基于OpenCV与深度学习模型的实现 在当今数字化时代&#xff0c;计算机视觉技术正以前所未有的速度改变着我们的生活与工作方式。其中&#xff0c;人脸检测与分析作为计算机视觉领域的重要分支&#xff0c;已广泛应用于安防监控、智能交互、…...

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

SAP-ABAP:SAP的Open SQL和Native SQL详细对比

在SAP ABAP开发中，Open SQL和Native SQL是两种操作数据库的方式，它们的核心区别在于可移植性、功能范围及底层实现机制。以下是详细对比： 1. Open SQL：深入解析 1.1 核心特性 数据库抽象层 Open SQL 由 SAP 内核的 Database Interface (DBI) 转换为目标数据库的 SQL（如 …...

编程日记 2025/9/10 7:13:20

基于大模型构建金融客服的技术调研

OpenAI-SB api接口 https://openai-sb.com/ ChatGPT与Knowledge Graph (知识图谱)分享交流 https://www.bilibili.com/video/BV1bo4y1w72m/?spm_id_from333.337.search-card.all.click&vd_source569ef4f891360f2119ace98abae09f3f 《要研究的方向和准备》 https://ww…...

编程日记 2025/9/9 21:14:08

Python设计模式：命令模式

1. 什么是命令模式&#xff1f; 命令模式是一种行为设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使您能够使用不同的请求、队列或日志请求&#xff0c;以及支持可撤销操作。 命令模式的核心思想是将请求的发送者与请求的接收者解耦&#xff0c;使得两者之间的…...

编程日记 2025/9/16 21:02:49

30天学Java第八天——设计模式

装饰器模式 Decorator Pattern 装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许通过动态地添加功能来扩展对象的行为&#xff0c;而不需要修改原有的类。 这种模式通常用于增强对象的功能&#xff0c;与继承相比&#xff0c;使用…...

编程日记 2025/9/16 6:59:45

Spring事务系列 三

Spring事务的传播机制 Spring事务系列 一-CSDN博客 Spring事务系列 二-CSDN博客 文章目录 系列文章目录 目录 文章目录 前言 一、Spring事务的传播机制 Propagation.REQUIRED: Propagation.SUPPORTS: Propagation.MANDATORY: Propagation.REQUIRES_NEW: Propagation.NOT_SUPPO…...

编程日记 2025/9/10 1:01:00

文件上传做题记录

1&#xff0c;[SWPUCTF 2021 新生赛]easyupload2.0 直接上传php 再试一下phtml 用蚁剑连发现连不上 那就只要命令执行了 2&#xff0c;[SWPUCTF 2021 新生赛]easyupload1.0 当然&#xff0c;直接上传一个php是不行的 phtml也不行&#xff0c;看下是不是前端验证&#xff0c;…...

编程日记 2025/9/16 21:00:20

机器学习的监督学习与无监督学习

机器学习主要分为监督学习和无监督学习两大类&#xff0c;两者的核心区别在于数据是否带有标签&#xff08;Label&#xff09;。以下是它们的详细对比和说明&#xff1a; 1. 监督学习&#xff08;Supervised Learning&#xff09; 定义&#xff1a;通过带有标签的训练数据&…...

编程日记 2025/9/9 9:41:13

C++ 入门三：函数与模板

一、内联函数&#xff1a;编译期嵌入的 “高效函数” 1. 什么是内联函数&#xff1f; 核心特性&#xff1a;在编译阶段&#xff0c;内联函数的函数体会直接嵌入到调用它的代码中&#xff0c;避免了普通函数的调用开销&#xff08;如压栈、跳转、返回&#xff09;。语法&#…...

编程日记 2025/9/7 13:13:41

解析券商qmt的优缺点

现在已经对于大QMT进行了一步步的深入了解与学习&#xff0c;也已经开始积木式搭建策略&#xff0c;进行交易了&#xff0c;但是&#xff0c;随时不断的深入&#xff0c;发现的问题也越来越多。下面开始逐一解析&#xff1a; 首页 | 迅投知识库 这是详细的说明。 目前券商给大…...

编程日记 2025/9/11 7:17:10

CSE lesson2 chrony服务器

CSE lesson2 chrony服务器 timedatectl命令 NTP(network time protocal)网络时间协议&#xff0c;时钟服务器同步时间的时候会使用到该协议进行时间同步。 #关闭/开启时间同步服务 [rootlocalhost ~]# timedatectl set-ntp 0/1#设置时间&#xff08;必须关闭时间同步服务才能…...

编程日记 2025/9/16 21:02:47

时光交响曲：杭州的科技与传统交响

故事背景 故事发生在中国浙江杭州&#xff0c;以现代科技与文化传统的交融为背景&#xff0c;展现了人与自然、历史的深刻联系。在晨曦中的茶园、宁静的运河书屋、科技堤坝等地方&#xff0c;每个场景都充满了生机与活力&#xff0c;展示了科技如何赋予传统文化新的生命&#x…...

编程日记 2025/9/13 1:25:09

【大模型智能体】Agent2Agent协议加上MCP协议也许会成为未来Agent智能体系统的标配

之前在文章《基于Claude MCP协议的智能体落地示例》、《MCP(Model Context Protocol) 大模型智能体第一个开源标准协议》我们已经对MCP协议做了介绍&#xff0c;MCP提供了将大模型连接到不同数据源和工具的标准方式&#xff0c;包括内容仓库、商业工具和开发环境。 以上解决的是…...

编程日记 2025/9/16 20:59:04

opencv(C++)处理图像颜色

文章目录 介绍使用策略设计模式比较颜色实现方案计算两个颜色向量之间的距离1. 简单方法&#xff1a;曼哈顿距离计算&#xff08;Manhattan Distance&#xff09;2.使用 OpenCV 的 cv::norm 函数3.使用 OpenCV 的 cv::absdiff 函数错误示例 使用 OpenCV 函数实现颜色检测实现方…...

编程日记 2025/9/16 21:02:47

2025年焊接与热切割作业证考试真题分享

焊接与热切割作业属于特种作业操作证考试&#xff0c;理论知识点专业性强、安全规范要求高&#xff0c;如何高效备考成为关键&#xff01;【100分题库】焊接与热切割作业理论备考题库紧扣最新考试大纲&#xff0c;帮你系统掌握考点&#xff0c;一次通过考试&#xff01; 1、下…...

编程日记 2025/9/12 10:04:48

AI 代码生成工具如何突破 Java 单元测试效能天花板？

一、传统单元测试的四大痛点 时间黑洞&#xff1a;根据 JetBrains 调研&#xff0c;Java 开发者平均花费 35% 时间编写测试代码覆盖盲区&#xff1a;手工测试覆盖率普遍低于 60%&#xff08;Jacoco 全球统计数据&#xff09;维护困境&#xff1a;业务代码变更导致 38% 的测试用…...

编程日记 2025/9/7 5:49:21

【C++游戏引擎开发】第13篇：光照模型与Phong基础实现

一、Phong模型数学原理 1.1 光照叠加公式 L = k a I a + k d I d max ⁡ ( 0 , n ⋅ l ) + k s I s max ⁡ ( 0 , r ⋅ v ) α L = k_a I_a + k_d I_d \max(0, \mathbf{n} \cdot \mathbf{l}) + k_s I_s \max(0, \mathbf{r} \cdot \mathbf{v})^\alpha L=ka​Ia​+kd​Id​max(0…...

编程日记 2025/9/15 11:29:20

如何在Android系统上单编ko？

文章目录 一、先了解编译驱动需要什么&#xff1f;二、配置makefile1、在Android系统编译LOG上找到编译器信息&#xff08;一般都会打印出来&#xff09;2、基于源MK构造 可独立运行的makefile3&#xff09;进入docker&#xff0c;在此makefile目录下敲make4&#xff09;最后根…...

编程日记 2025/9/15 7:53:52

虚拟dom工作原理以及渲染过程

浏览器渲染引擎工作流程都差不多&#xff0c;大致分为5步&#xff0c;创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步&#xff0c;用HTML分析器&#xff0c;分析HTML元素&#xff0c;构建一颗DOM树(标记化和树构建)。 第二步&#xff0c;用…...

编程日记 2025/9/11 5:25:51

无人机视觉定位，常用相机，及相机提供的数据信息

常用相机类型 单目相机&#xff1a;仅使用一个摄像头进行图像采集&#xff0c;结构简单、成本低。它可以获取无人机前方或下方的二维图像信息&#xff0c;包括物体的形状、颜色、纹理等。双目相机&#xff1a;由两个摄像头组成&#xff0c;模拟人类双眼视觉原理&#xff0c;通…...

编程日记 2025/9/16 7:10:33

A2L文件解析

目录 1 摘要2 A2L文件介绍2.1 A2L文件作用2.2 A2L文件格式详解2.2.1 A2L文件基本结构2.2.2 关键元素与声明2.2.3 完整A2L文件示例 3 总结 1 摘要 A2L文件&#xff08;也称为ASAP2文件&#xff09;是ECU开发的核心接口文件&#xff0c;用于标定、测量和诊断的关键配置文件&…...

编程日记 2025/8/27 3:11:05

Ansible：role企业级实战

文章目录 实现 nginx 角色创建task文件创建handler文件准备模板文件创建变量文件在playbook中调用角色 实现 memcached 角色创建相关目录创建相关task任务准备模板文件查看目录结构在playbook中调用角色 实现多角色的选择 实现 nginx 角色 卸载httpd&#xff0c;创建相关目录 a…...

编程日记 2025/9/12 8:23:24

vue2使用vue-echarts

1.先安装echarts npm i echarts 2.安装vue-echarts 安装的时候注意下对应的版本 "echarts": "5.5.0", "vue-echarts": "6.7.3",这是我安装的版本 注意事项&#xff1a; 如果安装之后报错&#xff1a;"export watchEffect …...

编程日记 2025/9/8 13:44:40

多光谱相机：海洋管道漏油（溢油）监测

每年海上溢油和化工管道漏油造成的污染事故和经济损失频发&#xff0c;在生态方面&#xff0c;漏油会带来导致水质恶化、生态系统破坏、食物链受损。在经济方面&#xff0c;会造成渔业损失、旅游业损失、航运业损失。在健康方面&#xff0c;会造成食品安全问题&#xff0c;直接…...

编程日记 2025/9/13 0:44:58

Kaggle-Digit Recognizer-(多分类+卷积神经网络CNN)

Digit Recognizer 题意&#xff1a; 给你每个图片的dataframe类型的数据&#xff0c;让你预测出每个图片可能是多少。 思考&#xff1a; 数据处理 1.首先把数据从dadaframe转换成numpy&#xff0c;数据类型改为float32&#xff0c;并且并且展开为1维的28281的形状&#xf…...

编程日记 2025/9/16 3:41:41

jQuery多库共存

在现代Web开发中&#xff0c;项目往往需要集成多种JavaScript库或框架来满足不同的功能需求。然而&#xff0c;当多个库同时使用时&#xff0c;可能会出现命名冲突、功能覆盖等问题。幸运的是&#xff0c;jQuery提供了一些机制来确保其可以与其他库和谐共存。本文将探讨如何实现…...

编程日记 2025/9/12 5:20:33

MCU的USB接口作为 USB CDC串口输出

前言&#xff1a; 如下内容是和Chatgpt的问答对话。询问了Chatgpt 关于 MCU微控制器内部的USB端口作为串口输出是怎么工作的&#xff0c;是否需要在上位机上安装串口驱动程序等&#xff0c;Chatgpt解答的很好。 正文&#xff1a; STM32 使用USB作为串行设备端口&#xff0c;需…...

编程日记 2025/9/8 1:30:01

VCode 的 .S 汇编文件里面的注释不显示绿色

1. 确认文件语言模式 打开 .S 文件后&#xff0c;查看 VS Code 右下角的状态栏&#xff0c;确认当前文件的识别模式&#xff08;如 Assembly、Plain Text 等&#xff09;。如果显示为 Plain Text 或其他非汇编模式&#xff1a; 点击状态栏中的语言模式&#xff08;如 Plain Te…...

编程日记 2025/9/16 1:31:43

【数学建模】（智能优化算法）萤火虫算法(Firefly Algorithm)详解与实现

萤火虫算法(Firefly Algorithm)详解与实现 文章目录 萤火虫算法(Firefly Algorithm)详解与实现前言1. 算法原理2. 算法流程3. Python实现4. 算法特点4.1 优点4.2 缺点 5. 应用领域6. 算法变种7. 总结与展望参考文献 前言 大家好&#xff0c;今天给大家介绍一种有趣且高效的群体…...

编程日记 2025/9/8 0:22:19

链路追踪组件学习

目录 1. 为啥需要链路追踪2. 常见的链路追踪组件3. 使用过的链路追踪组件3.1. Spring Cloud Sleuth3.2. Zipkin3.3. Apache SkyWalking 4. 集成Spring Cloud Sleuth框架4.1. 流程步骤4.2 sleuth工作流程 5. 集成zipKin5.1 添加 Zipkin 相关依赖5.2 安装zipkin服务5.3 配置 Zipk…...

编程日记 2025/9/15 0:48:05

# 基于OpenCV与Dlib的人脸融合技术实现

从仿射变换到人脸融合&#xff1a;基于OpenCV和Dlib的图像处理实践 在图像处理领域&#xff0c;仿射变换和人脸融合是两个非常有趣且实用的技术。仿射变换可以用于图像的几何变换&#xff0c;而人脸融合则可以创造出令人惊叹的视觉效果。本文将通过两个具体的代码示例&#xf…...

编程日记 2025/9/9 0:46:40

多光谱相机：水环境监测（水体富营养化、黑臭水体、藻类水华）

随着全球水体污染问题日益严峻&#xff0c;水体富营养化、黑臭水体和藻类水华等生态危机对人类健康和水生系统构成重大威胁。传统监测手段&#xff08;如人工采样、单点传感器&#xff09;因效率低、覆盖不足、实时性差等局限&#xff0c;难以满足复杂水环境的动态监管需求。多…...

编程日记 2025/9/10 0:17:50

记录一次nginx访问前端首页，一直显示nginx首页问题(实际是nginx访问页面权限问题)

同一台服务器&#xff0c;nginx配置是server { listen 8081; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location /New_mh_other { alias /home/hqu/data/new_mh_other; try…...

编程日记 2025/9/15 7:37:18

windows下命名管道双端通信

实现功能 1、命名管道双端通信&#xff08;异步&#xff09; 2、客户端断线重连 PS&#xff1a;多线程版本 PipeWrapper.h #include <windows.h> #include <string> #include <vector> #include "Utils/ThreadObject.h" #include "Utils/T…...

编程日记 2025/9/10 1:27:31

Linux自行实现的一个Shell(15)

文章目录 前言一、头文件和全局变量头文件全局变量 二、辅助函数获取用户名获取主机名获取当前工作目录获取最后一级目录名生成命令行提示符打印命令行提示符 三、命令处理获取用户输入解析命令行执行外部命令 四、内建命令添加环境变量检查和执行内建命令 五、初始化初始化环境…...

编程日记 2025/9/13 1:25:16

powerDesign 逆向 mysql 生成 物理模型，并用VBS脚本整理comment

学习自&#xff1a;https://www.cnblogs.com/xmyjcs/p/8536233.html 文章目录 Reverse Engineer格式化模型执行 VBS 脚本 Reverse Engineer 下面 DBMS 可以通过 ODBC&#xff08;Open Database Connectivity&#xff0c;开放数据库连接&#xff09;连接&#xff0c; 需要自己先…...

编程日记 2025/9/15 1:09:41

跨境全域中台：前端独立站群+后端共享云仓的协同作战体系

在全球化浪潮与互联网技术飞速发展的当下&#xff0c;跨境电商已然成为国际贸易领域中最为活跃的力量。据相关数据显示&#xff0c;过去几年跨境电商的年增长率持续保持高位&#xff0c;越来越多的企业投身于这片充满机遇与挑战的蓝海市场。在竞争日益激烈的跨境电商赛道上&…...

编程日记 2025/9/11 1:15:06

国产芯片解析：乐得瑞LDR6500C 超小封装全能芯片，赋能智能设备未来

LDR6500C是乐得瑞科技针对USB-C标准中的Bridge设备而开发的双USB-C DRP接口PD通信芯片&#xff0c;具备切换Data Role功能&#xff0c;支持最高USB PD 100W 充电&#xff0c;并且针对各大品牌设备的 USB-C 兼容性进行了特别优化&#xff0c;非常适合于 USB Type-C 设备快充转接…...

编程日记 2025/9/15 19:15:49

代码随想录-06-二叉树-05.10 二叉树的最小深度

二叉树的最小深度 #模板题 题目描述 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明叶子节点是指没有子节点的节点 具体思路&#xff08;暴力&#xff09; 层序遍历;找到cur.left null && cur.ri…...

编程日记 2025/9/14 20:29:11

系统与网络安全------网络通信原理（6）

资料整理于网络资料、书本资料、AI&#xff0c;仅供个人学习参考。 应用层解析 DNS Domain Name System&#xff0c;域名系统 用来完成域名与IP地址之间的映射&#xff0c;便于用户对网站的记忆和访问 端口号为TCP或UDP的53 DNS工作原理 FTP File Transfer Protocol 文件…...

编程日记 2025/9/12 3:38:04