vscode与vue/react环境配置
一、下载并安装VScode
安装VScode 官网下载
二、配置node.js环境
-
安装node.js 官网下载
会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理),此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:

-
配置系统变量
因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,所以进行以下操作进行修改
1)执行命令:(我的node安装目录是D:\nodejs)
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
2)然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\nodejs\node_modules”
3)最后编辑用户变量里的Path,将相应npm的路径改为:D:\nodejs\node_global
4)在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效(要以管理员身份进入cmd(在开始菜单中搜索命令提示符点击以管理员身份),否则会有权限问题)

webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号 -
安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
完成后输入cnpm -v检查

三、构建vue-cli脚手架(react跳过此项看第四步)
执行命令cnpm install -g vue-cli
执行命令cnpm install -g vue
执行命令cnpm install -g @vue/cli-init
通过vue -V查看版本号是否安装成功,如果不成功则检查vue安装目录和环境变量

四、安装react脚手架并创建react项目
执行命令cnpm install -g create-react-app
执行命令create-react-app my-react-project (my-react-project是项目的名称,这条命令会新建my-react-project目录,并且生成package.json,安装相关的react,react-dom等依赖)
执行命令cd my-react-project
npm start
浏览器中会打开以下页面,表示react开发环境已经搭建成功了
在vsCode中打开该项目,目录如下

相关文章:
vscode与vue/react环境配置
一、下载并安装VScode 安装VScode 官网下载 二、配置node.js环境 安装node.js 官网下载 会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理),此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号: 配置系统变量 因为在执…...
Vue前端对请假模块——请假开始时间和请假结束时间的校验处理
开发背景:Vueelement组件开发 业务需求:用户提交请假申请单,请假申请的业务逻辑处理 实现:用户选择开始时间需要大于本地时间,不得大于请假结束时间,请假时长根据每日工作时间实现累加计算 页面布局 在前…...
搭建freqtrade量化交易机器人
本文采用python量化机器人框架 freqtrade 开始操作! freqtrade官方文档 官方文档内容过多,请先跟随本文入门阅读,后续深入学习可参考官方文档~ 1. 准备云服务器 docker 环境 这里以云服务器选择 ubuntu 系统开始,先…...
php伪协议 [SWPUCTF 2022 新生赛]ez_ez_php(revenge)
打开题目 题目源代码如下 <?php error_reporting(0); if (isset($_GET[file])) {if ( substr($_GET["file"], 0, 3) "php" ) {echo "Nice!!!";include($_GET["file"]);} else {echo "Hacker!!";} }else {highlight_fi…...
1.1_1 计算机网络的概念、功能、组成和分类
文章目录 1.1_1 计算机网络的概念、功能、组成和分类(一)计算机网络的概念(二)计算机网络的功能(三)计算机网络的组成1.组成部分2.工作方式3.功能组成 (四)计算机网络的分类 总结 1.…...
pytorch中的各种计算
对tensor矩阵的维度变换,加减乘除等是深度学习中的常用操作,本文对一些常用方法进行总结 矩阵乘法 混合矩阵相乘,官网 torch.matmul(input, other, *, outNone) → Tensor这个方法执行矩阵相乘操作,需要第一个矩阵的最后一个维度…...
大数据技术之 Kafka
大数据技术之 Kafka 文章目录 大数据技术之 Kafka第 1 章 Kafka 概述1.1 定义1.2 消息队列1.2.1 传统消息队列的应用场景1.2.2 消息队列的两种模式 1.3 Kafka 基础架构 第 2 章 Kafka 快速入门2.1 安装部署2.1.1 集群规划2.1.2 集群部署2.1.3 集群启停脚本 2.2 Kafka 命令行操作…...
【GB28181】wvp-GB28181-pro部署安装教程(Ubuntu平台)
目录 前言1 安装依赖2 安装MySQL3 安装redis4 编译ZLMediaKit代码及依赖下载编译运行(如果要运行wvp整个项目,这步可以先不执行) 5 编译wvp-pro下载源码(建议从github上下载,gitee上维护有时候不是很同步)编…...
CentOS删除除了最近5个JAR程序外的所有指定Java程序
帮我写一个shell脚本,ps -eo pid,lstart,cmd --sort-start_time | grep "pgz-admin"查到的结果,返回的所有进程PID,第六个之上的,全部kill 当然,你可以创建一个简单的Shell脚本来完成这个任务。以下是一个例…...
面试redis篇-13Redis为什么那么快
Redis是纯内存操作,执行速度非常快采用单线程,避免不必要的上下文切换可竞争条件,多线程还要考虑线程安全问题使用I/O多路复用模型,非阻塞IOI/O多路复用模型 Redis是纯内存操作,执行速度非常快,它的性能瓶颈是网络延迟而不是执行速度, I/O多路复用模型主要就是实现了高效…...
python Matplotlib Tkinter--pack 框架案例
环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 版本一 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.messagebox as messagebox…...
连接未来:嵌入式系统在物联网时代的应用
连接未来:嵌入式系统在物联网时代的应用 随着物联网技术的不断发展,嵌入式系统在物联网时代扮演着至关重要的角色。嵌入式系统作为连接物理世界和数字世界的桥梁,为物联网的实现提供了技术支持和基础设施。以下将从几个方面探讨嵌入式系统在…...
自动驾驶中的障碍物时间对齐法
描述 自动驾驶算法使用的系统往往不是实时系统,因此每个节点间拿到的数据可能不是同一时间的数据,从而造成系统误差,针对这一现象,工程上往往采用时间对齐内插外推法。这里我们用感知障碍物来举例。 自动驾驶系统有许多重要模块…...
介绍 PIL+IPython.display+mtcnn for 音视频读取、标注
1. nn.NLLLoss是如何计算误差的? nn.NLLLoss是负对数似然损失函数,用于多分类问题中。它的计算方式如下:首先,对于每个样本,我们需要将其预测结果通过softmax函数转换为概率分布。softmax函数可以将一个向量映射为一个概率分布&…...
C语言中strstr函数的使用!
strstr函数的作用是什么? 查找子字符串 具体直接看下面的这段代码我相信你必明白 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> int main() { char *p1 "abcdefghijklmnopqrstuvwxyz"; char* p2 "abc"; char* r…...
Vue项目中,src目录下的vue.app文件介绍
在 Vue 项目中,src 文件夹通常包含了项目的核心代码。在这个文件夹下,App.vue 是一个特殊的文件,它代表了整个 Vue 应用的根组件。 App.vue 是一个单文件组件(Single File Component, 简称 SFC),它允许你将…...
【Android】坐标系
Android 系统中有两种坐标系,分别为 Android 坐标系和 View 坐标系。了解这两种坐标系能够帮助我们实现 View 的各种操作,比如我们要实现 View 的滑动,你连这个 View 的位置都不知道,那如何去操作呢? 一、Android 坐标…...
OSCP靶场--Slort
OSCP靶场–Slort 考点(1.php 远程文件包含 2.定时任务提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.178.53 -sV -sC -p- --min-rate 5000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-24 04:37 EST Nmap scan report for 192.168.178.53 …...
大数据职业技术培训包含哪些
技能提升认证考试,旨在通过优化整合涵盖学历教育、职业资格、技术水平和高新技术培训等各种教育培训资源,通过大数据行业政府引导,推进教育培训的社会化,开辟教育培训新途径,围绕大数据技术人才创新能力建设࿰…...
【Java程序设计】【C00313】基于Springboot的物业管理系统(有论文)
基于Springboot的物业管理系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的物业管理系统,本系统有管理员、物业、业主以及维修员四种角色权限; 管理员进入主页面,主要功能包…...
如何通过5种实用方法将数据从华为传输到OnePlus
作为冉冉升起的Android手机品牌,一加如今已成为最具性价比的手机品牌之一,并迅速占据了一定的市场份额。如果您曾经是华为的忠实粉丝,但现在入手了一加 13 或即将推出的一加 15,那么您就需要将数据从华为迁移到一加。这就是您来这…...
**发散创新:基于角色权限模型的动态访问控制实现与实战优化**在现代软件系统中
发散创新:基于角色权限模型的动态访问控制实现与实战优化 在现代软件系统中,权限管理已不再是简单的“用户-角色-资源”映射,而是需要支持细粒度、可配置、高扩展性的动态访问控制机制。本文以 Python Flask RBAC(基于角色的访问…...
用Matlab FDA插件和Verilog串行实现FIR滤波器:从Blackman窗到汉明窗的实战避坑
从Matlab到FPGA:FIR滤波器设计全流程实战解析 在数字信号处理领域,FIR滤波器因其稳定性、线性相位特性而备受青睐。本文将深入探讨如何从Matlab的滤波器设计工具平滑过渡到FPGA硬件实现,构建一套完整的Blackman窗与汉明窗FIR滤波器开发流程。…...
140. 如何使用 nginx /dbg
What is the /dbg command? 什么是 /dbg 命令?/dbg is a program included in the ingress-nginx container image that can be used to show information about the nginx environment and the resulting nginx configuration, which can be helpful when debuggi…...
Docker 27车载部署必须关闭的5个默认守护进程,否则QNX/Hypervisor共存环境下将触发TSN时间同步漂移
第一章:Docker 27车载部署的TSN时间同步风险总览在车载边缘计算场景中,Docker 27(即 Docker v27.x 系列)被广泛用于容器化部署时间敏感网络(TSN)相关的实时通信组件,例如 IEEE 802.1AS-2020 时间…...
不止是监控:用IPMI在OpenBMC里玩点新花样,比如自定义主机-BMC消息通道
超越监控:用IPMI构建主机与BMC间的自定义通信管道 当大多数开发者还在用IPMI查询传感器数据或远程重启服务器时,一群极客已经发现了这个协议的隐藏潜力——它可以是主机操作系统与基板管理控制器(BMC)之间的高速公路,承…...
STC15W104单片机8脚4路2262 1527解码输出程序-带学习功能与掉电储存功能
STC15W104单片机8脚4路2262 1527解码输出程序,带学习功能,掉电储存。老铁们今天咱们搞点硬核的!最近在玩STC15W104这个8脚小钢炮,折腾出个支持1527/2262编码的万能遥控解码器。核心功能就三点:自动学习遥控器、掉电记忆…...
Switch模拟器:Ryujin模拟器教程
下载配置模拟器前需要先安装游戏运行库,显卡驱动正常 龙神模拟器官网:https://ryujinx.org/ switch模拟器的区别 Ryujinx【龙神模拟器】兼容性更好,刚出来的游戏也能运行,但由于它以前只支持OpenGL,所以帧率较低&am…...
CSS 背景图片无法加载的常见原因与正确写法详解
本文系统讲解 html 中 css 背景图片(如 background-image: url(...))不显示的典型原因,包括路径错误、语法混用、属性书写不规范等问题,并提供可直接复用的标准写法与调试建议。 本文系统讲解 html 中 css 背景图片ÿ…...
告别手动改密码!Windows LAPS实战:在AD域环境里自动管理本地管理员账号
Windows LAPS实战:自动化域环境本地管理员密码管理指南 每次手动重置数百台域内计算机的本地管理员密码时,IT团队都会面临巨大压力。密码复杂度要求导致记忆困难,共享密码文档存在泄露风险,而定期轮换机制往往因为操作繁琐而流于形…...
