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

vue3环境搭建、nodejs22.x安装、yarn 1全局安装、npm切换yarn 1、yarn 1 切换npm

vue3环境搭建

node.js 安装

image-20250412184207042

image-20250412184351256

image-20250412184517260

image-20250412184549572

image-20250412184607988

image-20250412184634363

image-20250412184704576

验证nodejs是否安装成功

# 检测node.js 是否安装成功----cmd命令提示符中执行
node -v   
npm -v 

image-20250412184804719

设置全局安装包保存路径、全局装包缓存路径

在node.js 安装路径下 创建 node_global 和 node_cache

image-20250412185230185

# 设置npm全局安装包保存路径(新版本会默认安装路径下的node_global文件夹,可以用 npm config get prefix 命令先查看一下)
npm config set prefix "D:\nodejs\node_global"
# 设置npm装包缓存路径(新版本会默认安装路径下的node_global文件夹,可以用 npm config get cache 命令先查看一下)
npm config set cache "D:\nodejs\node_cache"# 验证命令
npm config get prefix  # 查看npm全局安装包保存路径
npm config get cache   # 查看npm装包缓存路径
npm list -global       # 查看全局安装目录:

image-20250412185808276

环境变量配置

# 设置环境变量(具体操作如下图)
【用户变量】变量名:Path                      C:\Users\用户名\AppData\Roaming\npm   改为  D:\nodejs\node_global
【系统变量】新建 变量名:NODE_PATH            变量值:D:\nodejs\node_global\node_modules
【系统变量】变量名:Path                      %NODE_PATH%
【系统变量】变量名:Path                      D:\nodejs\

image-20250412190406937

image-20250412190530174

image-20250412190621171

双击用户变量的 PATH

image-20250412190746628

删除:C:\Users\【你自己电脑的用户名】\AppData\Roaming\npm 环境变量

image-20250412191500017

添加:D:\nodejs\node_global

image-20250412191053269

【系统变量】新建,变量名:NODE_PATH 变量值:D:\nodejs\node_global\node_modules

image-20250412191631634

双击【系统变量】Path,添加:%NODE_PATH% 和 D:\nodejs\

image-20250412191923589

image-20250412192457690

加速(npm 和 cnpm 二选一即可)

# npm更换国内镜像源(淘宝)
npm config set registry http://registry.npm.taobao.org
# 查看npm下载源(查看是否更换成功)
npm config get registry# 安装cnpm(使用国内阿里云镜像文件地址  https://registry.npmmirror.com/)
npm install -g cnpm --registry=https://registry.npmmirror.com
# 查看npm下载源
cnpm config get registry
cnpm config list

安装vue(可以跳过,不用全局安装–不推荐安装)

# 查看安装的vue信息
# 是用于 查看 npm 仓库中 Vue 包的详细信息 的命令。通过这个命令,你可以获取 Vue 包的元数据(metadata),包括版本、依赖、作者、仓库地址等
npm info vue # 安装vue
npm install vue -g
# 查看安装的vue版本(验证是否安装成功)
npm list vue -g

安装webpack

如果你是vue3而且基于vite创建项目,webpack就不用安装

# 安装webpack
npm install webpack -g (全局安装-推荐)
npm install webpack --save-dev (局部安装)
# 查看版本号
webpack -v
# webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli:
npm install webpack-cli -g# 卸载webpack、webpack-cli
npm uninstall webpack webpack - cli -g

安装全局vue-cli脚手架

如果你是vue3而且基于vite创建项目,vue-cli就不用安装

# 安装全局vue-cli脚手架
npm install @vue/cli -g# 验证是否安装成功
vue -V# 卸载3.x版本 
npm uninstall @vue/cli -g

创建vue项目

方式一(官方推荐)

如果你是vue3,而且基于vite创建项目,安装好nodejs,可直接在cmd执行该命令创建项目,不用安装 webpack、vue-cli

# 创建vue3项目
# 在要创建项目的文件夹下执行# npm
npm create vue@latest
# yarn
yarn create vue

image-20250414160440089

方式二(以前老的可以创建vue2和vue3)

# 创建vue2或者vue3项目
# 在要创建项目的文件夹下执行
vue create 项目名# 指定包管理器 yarn
vue create --package-manager yarn 项目名
# 指定包管理器 npm
vue create --package-manager npm 项目名

第一行:自动创建vue3
第二行:自动创建vue2
第三行:手动选择功能(自定义搭建)

image-20250414160923303

包管理器Yarn 1 安装

1、使用Yarn 1会在项目中生成 yarn.lock文件

# 查看默认包管理器是npm 还是 yarn
查看 	C:\Users\用户名   中的  .vuerc 文件中的 packageManager 字段 值# 全局安装
npm install -g yarn# 查看yarn版本
yarn --version# 全局安装目录
yarn config set global-folder D:\Yarn\yarn_global# 设置全局 bin 目录
yarn config set prefix D:\Yarn\yarn_global\bin# 缓存目录
yarn config set cache-folder D:\Yarn\yarn_cache# 查看当前源
yarn config get registry# 修改为淘宝镜像源
yarn config set registry https://registry.npm.taobao.org# 环境变量(win系统)
在【系统变量】 Path 中添加:D:\Yarn\yarn_global\bin# 安装
yarn add axios
# 卸载
yarn remove axios

npm 切换 Yarn 1

1、全局安装 yarn 1
2、删除掉原本项目中的 node_modules 文件夹
3、删除package-lock.json 文件
4、yarn install

Yarn 1 切换 npm

1、删除掉原本项目中的 node_modules 文件夹
2、删除 yarn.lock 文件
3、npm install

相关文章:

vue3环境搭建、nodejs22.x安装、yarn 1全局安装、npm切换yarn 1、yarn 1 切换npm

vue3环境搭建 node.js 安装 验证nodejs是否安装成功 # 检测node.js 是否安装成功----cmd命令提示符中执行 node -v npm -v 设置全局安装包保存路径、全局装包缓存路径 在node.js 安装路径下 创建 node_global 和 node_cache # 设置npm全局安装包保存路径(新版本…...

配置HADOOP_HOME环境变量和maven_HOME环境变量

1.右击此电脑,选择“属性” 2.选择“高级系统配置” 3.选择“环境变量” 4.在“系统变量”下新建两个系统变量 注意:变量值要“浏览目录”选择你存放hadoop的文件和maven的文件 5.在“系统变量”里双击Path”,在里面新建两个变量...

计算机网络:实验五路由器的应用

实验五路由器的应用 1.1实验目的 掌握路由器的应用;熟悉路由器的基本配置方法。 1.2实验要求 学生提前准备好实验报告,预习并熟悉实验步骤;遵守实验室纪律,在规定的时冋内完成要求的内容。 1.3 实验内容与步骤 1、假设企业网…...

【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——RS232接口测试

1)实验平台:正点原子ATK-DLMP257B开发板 2)浏览产品:www.alientek.com 3)全套实验源码手册视频下载:正点原子资料下载中心 文章目录 第四章 ATK-DLMP257B功能测试——RS232接口测试 第四章 ATK-DLMP257B功能…...

考研单词笔记 2025.04.15

addition n添加,增加,加法 additional a附加的,额外的 in addition 另外;除此之外;加之 augment v增加,增强,提高 explode v急剧增长,爆炸,爆发,迸发 gr…...

zkmall模块商城:B2C 场景下 Vue3 前端性能优化的广度探索与实践

ZKmall作为面向B2C场景的模块化电商平台,其前端性能优化在Vue3框架下的实践融合了架构设计、渲染机制与业务特性,形成了一套多维度的优化体系。以下从技术实现与业务适配两个维度展开分析: 一、Vue3响应式系统深度适配 ​Proxy驱动的精准更新…...

WebSocket 技术详解

引言 在现代Web应用中,实时通信已经成为不可或缺的一部分。想象一下聊天应用、在线游戏、股票交易平台或协作工具,这些应用都需要服务器能够即时将更新推送给客户端,而不仅仅是等待客户端请求。WebSocket技术应运而生,它提供了一…...

微服务即时通信系统---(四)框架学习

目录 ElasticSearch 介绍 安装 安装kibana ES客户端安装 头文件包含和编译时链接库 ES核心概念 索引(Index) 类型(Type) 字段(Field) 映射(mapping) 文档(document) ES对比MySQL Kibana访问ES测试 创建索引库 新增数据 查看并搜索数据 删除索引 ES…...

日常记录-CentOS 9安装java17

文章目录 前言一、手动安装 Oracle JDK 17 或 OpenJDK 17(适合自定义路径)二、使用 CentOS 9 系统包安装 OpenJDK 17(简单稳定)三、使用 SDKMAN(管理多个版本)总结 前言 CentOS 9安装java17 一、手动安装 …...

Python 导出 PDF(ReportLab )

文章目录 1. ReportLab 使用1.1. 安装 ReportLab1.2. 创建 PDF 文件1.3. 使用文档模板 DocTemplate1.4. 使用页面模板 PageTemplate1.5. 继承 BaseDocTemplate1.6. 使用 SimpleDocTemplate1.7. 继承Canvas1.8. 直接使用Canvas 2. 字体与编码3. PLATYPUS - 页面布局和排版3.1. 设…...

私域运营的底层逻辑:从流量到留存的进阶之路

私域流量已成为企业营销的新战场,但盲目跟风只会事倍功半。 接下来,我将深入剖析私域运营的底层逻辑,从几个关键环节,助你构建高效稳定的私域体系。 一、价值优先:以用户需求为核心 私域运营并非简单的粉丝积累&…...

【数据结构 · 初阶】- 带头双向循环链表

目录 1.尾插 2.初始化 3.尾删、头插、头删 4.查找,返回 pos 指针 5.pos 前插入 优化头插,直接复用 优化尾插,直接复用 6.pos 位删除 头删尾删简化 7.销毁 整体代码 List.h List.c Test.c 循环:1.尾 next 指向哨兵位…...

Cube IDE常用快捷键

STM32CubeIDE常用快捷键 STM32CubeIDE快捷键很多,可以通过 Help > Show Active Keybindings… 查看当前可用快捷键;也可以在 Window > Preferences > General > Keys 中查看修改快捷键 快捷键快捷键说明Ctrl/注释行/取消注释行CtrlD删除行…...

C++开发中的DUMP文件:解决崩溃与性能问题的利器(全文字数2w+)

[外链图片转存中…(img-mf6LznjF-1744717065188)] 文章目录 前言为什么需要了解DUMPDUMP在C开发中的重要性 一、DUMP基础概念1. 什么是DUMP文件2. DUMP文件的类型3. DUMP文件的作用(1)调试程序崩溃(2)分析程序性能(3&a…...

Golang|接口并发测试和压力测试

文章目录 这里出现某些奖品和数据库中库存量不一致的问题原因就是在并发的情况下,sync.Map仍然会出现脏写问题,就是在同时操作下的操作覆盖问题可以先把数据放到channel里,然后用一个单一的协程负责读取channel并写入map...

解决 Maven 500 错误:无法传输 maven-metadata.xml 文件

在使用 Maven 构建和管理 Java 项目时,可能会遇到类似以下的错误信息: [WARNING] Could not transfer metadata com.ha:xxx-model:2025.0.1.SNAPSHOT/maven-metadata.xml from/to public (http://xxx.xx.xx.xx/repository/maven-public): status code: …...

鸿蒙应用开发—鸿蒙app一键安装脚本

背景 当鸿蒙App开发完后需要提测,如何将App文件发给QA安装测试,是一件麻烦事,因为鸿蒙App并不能像Android Apk那样可以直接安装到设备中,能想到的方式有: 直接叫测试拿手机过来安装让测试安装DevEco Studio 拉代码编…...

opencv二值化实验

二值化实验 1二值化说明2 阈值法(THRESH_BINARY)3.反阈值法(THRESH_BINARY_INV)4截断阈值法(THRESH_TRUNC)5 低阈值零处理(THRESH_TOZERO)6 超阈值零处理(THRESH_TOZERO_…...

3DGS之渲染管线

渲染管线(Rendering Pipeline)是计算机图形学中将三维场景转换为二维屏幕图像的核心流程,涉及CPU与GPU的分工协作。计算机图形学把渲染管线分为三个阶段:应用程序阶段、几何阶段、光栅化阶段。渲染管线的一般流程是:顶…...

C#设计模式-状态模式

状态模式案例解析:三态循环灯的实现 案例概述 本案例使用 状态模式(State Pattern) 实现了一个 三态循环灯 的功能。每点击一次按钮,灯的状态会按顺序切换(状态1 → 状态2 → 状态3 → 状态1...)&#xff…...

泛微相关文档以及相关安装包下载

泛微相关文档以及相关安装包下载 泛微相关安装包下载泛微相关安装包下载 泛微E10登录网址:https://www.e-cology.com.cn/login?service=https%3A%2F%2Fwww.e-cology.com.cn%2F Ecode使用说明:https://e-cloudstore.com/doc.html 泛微组件库:https://cloudstore.e-cology…...

软件包安装管理Gitlab

官方提供了非常详尽的系统及自动化脚本安装教程 Gitlab官网下载地址:https://gitlab.cn/install/ 1、安装配置 今天我们说一下包安装管理,这样方便我们自己更精确的制定符合我们自己需要的Gitlab仓库 配置:ubuntu2004(focal) 4C8G 下载程…...

在Java使用rest Client操作ES

1. 导入restClient依赖 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.12.1</version></dependency> 2. 了解ES核心客户端API 核心区别…...

深入解析Linux软件包管理:apt/yum源配置与Vim编辑器高效使用指南

一、Linux软件包管理与开发工具 1.软件包管理器与Linux软件生态 软件包管理器的作用与分类 什么是软件包&#xff1f; 在Linux下安装软件&#xff0c;一个通常的办法是下载到程序的源代码&#xff0c;并进行编译&#xff0c;得到可执行程序。但是这样太麻烦了&#xff0c;于…...

小程序css实现容器内 数据滚动 无缝衔接 点击暂停

<view class"gundongBox"><!-- 滚动展示信息的模块 --><image class"imgWid" :src"imgurlgundong.png" mode"widthFix"></image><view class"gundongView"><view class"container&qu…...

记录 | Pycharm中如何调用Anaconda的虚拟环境

目录 前言一、步骤Step1 查看anaconda 环境名Step2 Python项目编译器更改 更新时间 前言 参考文章&#xff1a; 参考视频&#xff1a;如何在pycharm中使用Anaconda创建的python环境 自己的感想 这里使用的Pycharm 2024专业版的。我所使用的Pycharm专业版位置&#xff1a;【仅用…...

静态站点生成

以下是关于 静态站点生成(SSG) 的系统知识梳理,涵盖核心概念、核心实现、数据管理与优化等内容: 一、核心概念与优势 定义 静态站点生成(SSG)是在构建阶段预生成所有静态HTML文件的技术,用户访问时直接获取预渲染内容,无需服务器动态生成。 核心优势 性能卓越:CDN缓存…...

Android Jni(二)加载调用第三方 so 库

文章目录 Android Jni&#xff08;二&#xff09;加载调用第三方 so 库前置知识CPU架构 ABI 基本步骤1、将第三方 SO 库文件放入项目中的正确位置&#xff1a;2. 创建 JNI 接口3. 实现 JNI 层代码4、配置 CMake 常见问题解决1、UnsatisfiedLinkError&#xff1a;2、函数找不到&…...

解锁元生代:ComfyUI工作流与云原生后端的深度融合

目录 蓝耘元生代&#xff1a;智算新势力崛起​ ComfyUI 工作流创建详解​ ComfyUI 初印象​ 蓝耘平台上搭建 ComfyUI 工作流​ 构建基础工作流实操​ 代码示例与原理剖析​ 云原生后端技术全景 云原生后端概念解析​ 核心技术深度解读​ 蓝耘元生代中两者的紧密联系​…...

LeetCode算法题(Go语言实现)_47

题目 给你一个 m x n 的迷宫矩阵 maze &#xff08;下标从 0 开始&#xff09;&#xff0c;矩阵中有空格子&#xff08;用 ‘.’ 表示&#xff09;和墙&#xff08;用 ‘’ 表示&#xff09;。同时给你迷宫的入口 entrance &#xff0c;用 entrance [entrancerow, entrancecol…...

树莓派_利用Ubuntu搭建gitlab

树莓派_利用Ubuntu搭建gitlab 一、给树莓派3A搭建基本系统 1、下载系统镜像 https://cdimage.ubuntu.com/ubuntu/releases/18.04/release/ 2、准备系统SD卡 二、给树莓派设备联网 1、串口后台登录 使用串口登录后台是最便捷的&#xff0c;因为前期网络可能不好直接成功 默…...

vi(vim)编辑器和root用户与普通用户之间的转换

vim编辑器是vi编辑器的加强版&#xff0c;以vi为例&#xff1a; vi编辑器&#xff1a; vi编辑器可以编辑文件内容 如何进入vi编辑器&#xff1f; 语法&#xff1a; vi 文件路径 如何退出&#xff1f; 语法&#xff1a; wq&#xff1a;保存退出 w&#xff1a;保存 q&…...

【vscode】vscode链接关联github/gitlab

一、windows下载安装git Git - Downloading Package 二、配置Git的用户名和邮箱 Git Bash运行以下命令来配置Git的用户名和邮箱&#xff1a; git config --global user.name "你的用户名" git config --global user.email "你的邮箱地址" 生成本机秘钥…...

Redis面试问题缓存相关详解

Redis面试问题缓存相关详解 一、缓存三兄弟&#xff08;穿透、击穿、雪崩&#xff09; 1. 穿透 问题描述&#xff1a; 缓存穿透是指查询一个数据库中不存在的数据&#xff0c;由于缓存不会保存这样的数据&#xff0c;每次都会穿透到数据库&#xff0c;导致数据库压力增大。例…...

Web三漏洞学习(其一:文件上传漏洞)

靶场:云曦历年考核题 一、文件上传 在此之前先准备一个一句话木马 将其命名为muma.txt 23年秋期末考 来给师兄上个马 打开环境以后直接上传muma.txt&#xff0c;出现js弹窗&#xff0c;说明有前端验证 提示只能上传.png .jpg 和 .gif文件&#xff0c;那就把muma.txt的后缀…...

冲刺高分!挑战7天一篇nhanes机器学习SCI!DAY1-7

医学生集合啦&#xff0c;继续挑战 7天一篇nhanes机器学习SCI&#xff01; Day 1 进展&#xff1a;确定选题、期刊、文献 前面挑战了一期NHANES机器学习&#xff0c;大家使用NHANES的发文章的热情&#xff0c;火爆程度远超想象&#xff01;我在下面的评论区看到大家的学习欲…...

高并发三剑客-本地缓存之王Caffeine-01缓存应用

1 分布式缓存使用及导致的问题 1.1 hotkey典型业务场景 常规性hotkey&#xff1a;可以提前评估出hotkey的场景&#xff0c;比如&#xff1a;重要节假日、促销活动等 突发性hotkey&#xff1a;没法提前评估&#xff0c;突发性行为&#xff0c;比如&#xff1a;突然新闻、爆炸信息…...

基于Java,SpringBoot,Vue,HTML家政服务预约系统设计

摘要 本文聚焦于基于Java、SpringBoot、Vue和HTML技术的家政服务预约系统的设计与实现。该系统旨在为家政服务的供需双方搭建一个便捷、高效的在线交互平台。后端采用Java语言结合SpringBoot框架&#xff0c;充分利用SpringBoot的自动配置和快速开发特性&#xff0c;实现系统业…...

系统架构设计师:系统架构概述知识体系、考点详解、高效记忆要点、练习题并提供答案与解析

一、系统架构概述知识体系、考点详解 系统架构概述、定义与作用 1. 系统架构的定义与核心要素 系统架构是复杂系统的高层次组织结构&#xff0c;包含硬件/软件组件、交互关系、设计原则及演进策略。其核心要素包括&#xff1a; 构件与模式&#xff1a;现代架构三要素为构件…...

汽配快车道解决chrome backgroud.js(Service Worker) XMLHttpRequest is not defined问题

Chrome 扩展开发&#xff1a;Service Worker 中如何优雅地发送 HTTP 请求 在 Chrome 扩展开发中&#xff0c;Service Worker 是一个非常重要的部分&#xff0c;它可以帮助我们实现很多强大的功能。然而&#xff0c;如果你在 Service Worker 中尝试使用 XMLHttpRequest 来发送 …...

VMware Ubuntu挂载Windows机器的共享文件

https://www.dong-blog.fun/post/2029 在VMware Ubuntu中访问Windows共享文件夹&#xff1a;完整指南 在使用VMware运行Ubuntu虚拟机时&#xff0c;访问Windows主机上的文件是常见需求。本文将详细介绍如何通过网络共享方式&#xff0c;让Ubuntu虚拟机直接访问Windows主机的文…...

LeNet神经网络

一、LeNet概述 1. 历史地位 开创性模型&#xff1a;首个成功应用的卷积神经网络&#xff08;1998年&#xff09;应用场景&#xff1a;手写数字识别&#xff08;MNIST数据集&#xff09;、银行支票识别提出者&#xff1a;Yann LeCun团队&#xff08;论文《Gradient-Based Lear…...

Visio绘图工具全面科普:解锁专业图表绘制新境界[特殊字符]

Visio绘图工具全面科普&#xff1a;解锁专业图表绘制新境界&#x1f31f; 在信息爆炸的时代&#xff0c;清晰、直观地呈现复杂信息变得至关重要。无论是绘制流程图&#x1f4ca;、组织结构图&#x1f465;&#xff0c;还是规划网络拓扑&#x1f5a7;&#xff0c;一款强大的绘图…...

ECharts散点图-散点图3,附视频讲解与代码下载

引言&#xff1a; ECharts散点图是一种常见的数据可视化图表类型&#xff0c;它通过在二维坐标系或其它坐标系中绘制散乱的点来展示数据之间的关系。本文将详细介绍如何使用ECharts库实现一个散点图&#xff0c;包括图表效果预览、视频讲解及代码下载&#xff0c;让你轻松掌握…...

D3路网图技术文档

在本文档中&#xff0c;我们将探讨如何使用 D3.js&#xff0c;结合 SVG&#xff08;可缩放矢量图形&#xff09;和 Canvas&#xff0c;来实现高效、交互性强的路网图效果。D3.js 是一个强大的 JavaScript 数据可视化库&#xff0c;可以基于数据驱动文档对象模型&#xff08;DOM…...

Unity 一些小功能(屏幕画画,)

利用 Line Renderer 实现屏幕画画并保存图片 // 当前正在绘制的 LineRendererprivate LineRenderer currentLineRenderer;// 用于保存所有笔触的列表private List<LineRenderer> allLineRenderers new List<LineRenderer>();// 当前笔触顶点计数器private int ve…...

列表、字符串、heapq堆对列算法

1、列表 1.1 访问最后一个元素 list [1, 2, 3, 4, 5, 6] print(list[-1]) # 61.2 访问列表指定范围&#xff0c;例如第1-4个元素 print(list[0, 4]) # [1, 2, 3, 4]1.3 将字符列表以字符串形式输出 list [h, e, l, l, o] ls "".join(list) print(ls) # "…...

实战指南:封装Whisper为FastAPI接口并实现高并发处理

下面给出一个详细的示例&#xff0c;说明如何使用 FastAPI 封装 OpenAI 的 Whisper 模型&#xff0c;提供一个对外的 REST API 接口&#xff0c;并支持一定的并发请求。 下面是主要步骤和示例代码。 1. 环境准备 Python 环境&#xff1a; 建议使用 Python 3.8。依赖库&#x…...

Arm系统ubuntu20.04中自带的火狐浏览器打开网页B站视频和百度网盘网页视频,视频无法打开,并且没有声音——(本质上解决)

自己工作过程中有一台Orin nx arm设备&#xff0c;所以希望能够用这台设备看视频学习&#xff0c;发现自带的firefox打开网页版百度网盘和B站的时候无法打开视频&#xff0c;而且用有线耳机发现没有声音&#xff0c;最后换掉浏览器&#xff0c;用Chromium。 1、如果还想继续用…...

Qt 自定义控件

在 Qt 中&#xff0c;自定义控件是通过继承现有的 Qt 控件类&#xff08;如 QWidget、QPushButton、QLabel 等&#xff09;并重载相关的事件处理函数或绘制函数来实现的。自定义控件允许你根据需求添加特定的功能或样式。 自定义控件的基本步骤 1. 继承 Qt 控件类&#xff1a…...