vscode与vue/react环境配置

一、下载并安装VScode

安装VScode 官网下载

二、配置node.js环境

  1. 安装node.js 官网下载
    会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理),此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:
    在这里插入图片描述

  2. 配置系统变量
    因为在执行例如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的版本号

  3. 安装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中打开该项目,目录如下
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/265159.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++进阶】STL容器--list底层剖析(迭代器封装)

目录 前言 list的结构与框架 list迭代器 list的插入和删除 insert erase list析构函数和拷贝构造 析构函数 拷贝构造 赋值重载 迭代器拷贝构造、析构函数实现问题 const迭代器 思考 总结 前言 前边我们了解了list的一些使用及其注意事项,今天我们进一步深入…

LeetCode53题:最大子数组和(python3)

代码思路: 动态规划,使用动态规划如果上一个数是大于0,则加上;如果小于0直接用0。这样做的好处就是最终直接是最大子数组和。 class Solution:def maxSubArray(self, nums: List[int]) -> int:for i in range(1,len(nums)):nu…

ubuntu+QT+ OpenGL环境搭建和绘图

一,安装OpenGL库 安装OpenGL依赖项:运行sudo apt install libgl1-mesa-glx命令安装OpenGL所需的一些依赖项。 安装OpenGL头文件:运行sudo apt install libgl1-mesa-dev命令来安装OpenGL的头文件。 安装GLUT库:GLUT(Ope…

express+mysql+vue,从零搭建一个商城管理系统5--用户注册

提示:学习express,搭建管理系统 文章目录 前言一、新建user表二、安装bcryptjs、MD5、body-parser三、修改config/db.js四、新建config/bcrypt.js五、新建models文件夹和models/user.js五、index.js引入使用body-parser六、修改routes/user.js七、启动项…

数字化运维与AIOps

干掉传统运维的不是devops,不是容器化,而是AI。随着未来基础设施的膨胀和复杂度急剧提升,人类运维能力已经显得力不从心。运维最终的归宿一定是人类决策,AI汇报与执行。 什么是数字化运维 数字化运维是一种基于信息技术手段数字化…

【GB28181】wvp-GB28181-pro部署安装教程(Ubuntu平台)

目录 前言1 安装依赖2 安装MySQL3 安装redis4 编译ZLMediaKit代码及依赖下载编译运行(如果要运行wvp整个项目,这步可以先不执行) 5 编译wvp-pro下载源码(建议从github上下载,gitee上维护有时候不是很同步)编…

USB Micro引脚及相应原理图绘制

前言:博主为实现绘制USB Micro输入口原理图,首先在 GD32F103XX的数据手册中找到引脚的功能描述,找到USBDM与USBDP功能,分别为引脚PA11与引脚PA12。然后进行相应的原理图绘制。 * USBDM。USBDM 引脚是与通用串行总线 (Universal Se…

Python 光速入门课程

首先说一下,为啥小编在即PHP和Golang之后,为啥又要整Python,那是因为小编最近又拿起了 " 阿里天池 " 的东西,所以小编又不得不捡起来大概五年前学习的Python,本篇文章主要讲的是最基础版本,所以比…

年龄性别预测4:C/C++实现年龄性别预测和识别(含源码,可实时预测)

年龄性别预测4:C/C实现年龄性别预测和识别(含源码,可实时预测) 目录 年龄性别预测4:C/C实现年龄性别预测和识别(含源码,可实时预测) 1.年龄性别预测和识别方法 2.人脸检测方法 3.年龄性别预测和识别模型(Python) &#xff0…

prometheus+grafana监控nginx的简单实现

1.编译安装NGINX 加入编译安装nginx-module-vts模块,目的是为了获取更多的监控数据(虚拟主机,upstream等) nginx下载 http://nginx.org/download/nginx-1.20.2.tar.gz nginx-module-vts下载 https://github.com/vozlt/nginx-module-vts/archive/refs/tags/v0.2…

【Docker】安装及相关的命令

目录 一 Docker简介 1.1 是什么 1.2 优缺点 1.3 应用场景 1.4 安装 二 命令 2.1 Docker基本命令 2.2 Docker镜像命令 2.3 Docker容器命令 一 Docker简介 1.1 是什么 Docker是一个开源的应用容器引擎,它基于Go语言实现,并利用操作系统本身已有的…

【亚马逊云】跨AWS账号创建复制规则同步S3存储桶中的数据

文章目录 注意事项一、创建存储桶【创建方&接收方完成操作】二、上传数据至bucket-transmit待同步测试三、创建复制规则【创建方完成操作】四、接收复制的对象【接收方完成操作】五、创建复制任务【创建方操作】六、运行批处理操作【创建方完成操作】七、检查是否完成跨账号…

leetcode:134.加油站

解题思路:需要注意开始时的编号,有的可以走一圈,有的走不了 模拟过程:for循环主要是用来模拟线性的过程,而在这里它是环状的; 可以用暴力解法,但是在这里我用贪心来解决。 常见疑惑&#xff1…

Django配置静态文件

Django配置静态文件 目录 Django配置静态文件静态文件配置调用方法 一般我们将html文件都放在默认templates目录下 静态文件放在static目录下 static目录大致分为 js文件夹css文件夹img文件夹plugins文件夹 在浏览器输入url能够看到对应的静态资源,如果看不到说明…

网络安全之内容安全

内容安全 攻击可能只是一个点,防御需要全方面进行 IAE引擎 DFI和DPI技术--- 深度检测技术 DPI --- 深度包检测技术--- 主要针对完整的数据包(数据包分片,分段需要重组),之后对 数据包的内容进行识别。(应用…

力扣5. 最长回文子串(双指针、动态规划)

Problem: 5. 最长回文子串 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1:双指针 1.我们利用双指针从中间向两边扩散来判断是否为回文串,则关键是找到以s[i]为中心的回文串; 2.我们编写一个函数string palindrome(string &s, in…

大数据可视化的设计规范,全面剖析,很实用。

大数据可视化的设计规范需要考虑到数据量大、复杂度高、数据类型多样等特点。以下是一份常见的大数据可视化设计规范,供您参考: 设计原则 简单易用:保证用户操作简单、直观,降低用户认知负担。数据准确:保证数据准确…

数据结构-关键路径

介绍 在AOV网的基础上,如果用对应边来表示活动持续时间,这种有向图被称为AOE网在AOE网中,入度为0的为源点,出度为0的为汇点,整张网看做是一件事情完成的过程,那么这两个点就是事情的开始和结束。每个活动持…

阿里云ECS服务器vCPU是什么意思?

阿里云ECS服务器vCPU和CPU是什么意思?CPU和vCPU有什么区别?一台云服务器ECS实例的CPU选项由CPU物理核心数和每核线程数决定,CPU是中央处理器,一个CPU可以包含若干个物理核,通过超线程HT(Hyper-Threading&am…

C#,弗洛伊德-瑞文斯特(Floyd-Rivest)算法与源代码

Robert W. Floyd 1 Floyd-Rivest 算法 Floyd-Rivest 算法是一种选择算法,用于在不同元素的数组中找到第k个最小元素。它类似于快速选择算法,但在实际运行中有更好的运行时间。 和 QuickSelect 一样,该算法基于分区的思想工作。对数组进行分…