前端配置开发环境,新电脑配置前端开发环境,Vue开发环境配置的详细过程(前端开发环境配置,电脑重置后配置前端开发环境)
简介:有时候,我们需要在新电脑 或者 电脑重置后,配置前端开发环境,具体都需要安装什么软件和插件,这里来记录一下(文章适合新手和小白,大佬可以带过)。
✨前端开发环境,需要用到的软件和插件:
-
Chrome
-
Visual Studio Code(vscode)
-
Node.js(npm / cnpm)
-
Vue CLI (vue-cli / vue/cli)
-
Git
一、安装Chrome(谷歌浏览器)
Tips: Google Chrome程序员必备,它是一款由谷歌公司开发的网页浏览器,于2008年首次发布。它被广泛认为是速度快、安全性高、功能强大的浏览器之一。Chrome支持多种操作系统,包括Windows、MacOS和Linux。它具有简洁的界面、快速的页面加载速度、强大的扩展程序生态系统和内置的安全功能。Chrome还集成了Google的搜索引擎,使用户可以更便捷地进行搜索,适合个人用户和企业用户使用。

1、Chrome浏览器安装地址
Chrome官网
https://www.google.cn/chrome/
2、这里就不多说了,直接安装使用就行,也可以直接在应用商店进行下载。
二、安装Visual Studio Code(简称vscode)
Tips: Visual Studio Code是一款轻量级、功能强大的源代码编辑器,可在Windows、macOS、Linux甚至浏览器上使用。它内置了对JavaScript、TypeScript和Node.js的支持,并为其他语言和运行时提供了丰富的扩展生态系统。

1、Vscode官网
Visual Studio Code官网
https://code.visualstudio.com/
2、下载时,选择好与自己匹配的系统版本,一般的64位windosws用户,点击下载这个

下载完成以后,直接点击安装,点击选择接受协议,点击下一步安装就好。
三、安装Node.js
Tips: 这里解释下,npm 是 nodejs 中的一部分,通常与 nodejs 一起安装和更新。当你安装了 nodejs,npm 也随之安装。npm全称是Node Package Manager,它是 nodejs的官方包管理工具,用来管理和分发 JS库和其他相关资源的系统,npm 可以安装、共享和管理项目的依赖关系,可通过 `npm -v` 命令可以检查其版本信息。

1、Node.js官网
Node.js官网
https://nodejs.org/en
2、Node.js中文网
Node.js中文网
http://nodejs.p2hp.com/
3、如需,安装步骤 和 配置nodejs的环境变量,详见此文
Node.js安装步骤以及环境变量的配置
https://blog.csdn.net/weixin_65793170/article/details/126885041?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170684972716777224451412%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170684972716777224451412&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126885041-null-null.nonecase&utm_term=nodejs&spm=1018.2226.3001.4450
4、安装完成后,可以使用node -v和npm -v来检测是否安装成功,注意这里的-v是小写字母。可以在命令提示符窗口 或者 vscode中都可以检测是否安装成功。
这里说下,如何在命令提示符窗口检测安装结果?
直接在键盘按下win + r 键,弹出输入框,输入cmd,

再按回车键,命令提示符窗口启动,然后直接输入node -v和npm -v检测安装结果,如下

node版本号v16.17.1,npm版本号8.15.0,可以看到检测安装成功。
5、这里推荐配置安装下npm镜像cnpm,cnpm是一个为中国用户量身打造的Node.js包管理工具,它通过提供国内的镜像服务器来加速Node.js包的下载和安装,为Node.js开发者带来了更加流畅和高效的开发体验。想要使用cnpm,需要先行配置下载cnpm,cnpm的下载命令如下:
//cnpm 安装使用新的镜像源
npm install -g cnpm --registry=https://registry.npmmirror.com/旧的域名
http://npm.taobao.org 和
http://registry.npm.taobao.org 已经在 2022 年 5 月 31 日停止服务
6、使用npm安装cnpm时报错,安装不上时,可以查看下文,里面有详解:
cnpm安装不上,cnpm安装时报错
https://blog.csdn.net/weixin_65793170/article/details/136441677?spm=1001.2014.3001.5501
7、cnpm安装完成后,如果cnpm命令不管用的话,也是需要配置环境变量的,一般的cnpm文件地址为如下:
C:\Users\Administrator\AppData\Roaming\npm
8、如果 cnpm命令 在命令提示符窗口管用,而在Vscode中不生效,则需要在PowerShell中设置远程签名,跟 vue命令 在命令提示窗口管用,在Vscode中不生效情况是一样的,配置详情如下:
cnpm命令在Vscode中不生效
https://blog.csdn.net/weixin_65793170/article/details/128987191?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170922812116800197041820%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170922812116800197041820&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-8-128987191-null-null.nonecase&utm_term=vue&spm=1018.2226.3001.4450
四、安装Vue脚手架,也就是Vue CLI / vue-cli / vue/cli
Tips: Vue CLI是Vue.js官方提供的标准化开发工具,旨在简化和加快Vue.js项目的开发流程。通过vue-cli,开发者可以通过命令行或用户界面(UI)快速地创建一个新的Vue项目,并自动生成适合Vue和Webpack的项目模板。简而言之,Vue脚手架可以帮助开发者更高效地搭建起一个具备所需依赖库的Vue项目,以便更快地进入实际编程工作。

1、Vue脚手架安装命令
npm install -g @vue/cli
//或者
cnpm install -g @vue/cli
2、安装完成后,有时候会遇到,在命令提示符窗口使用vue命令管用,但在vscode中,vue命令不生效的情况,这时候需要在Windows Powershell管理员模式中配置执行策略,详见此文
配置执行策略
https://blog.csdn.net/weixin_65793170/article/details/128987191?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170684702416800182752105%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170684702416800182752105&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-128987191-null-null.nonecase&utm_term=vue%E5%91%BD%E4%BB%A4%E5%9C%A8vscode%E4%B8%AD%E4%B8%8D%E7%94%9F%E6%95%88&spm=1018.2226.3001.4450
3、安装完成后,可通过vue -V(注意是大写的V)来检测vue版本是否安装成功,如果能看到Vue CLI的版本号,说明Vue CLI已经成功安装。

五、安装Git
Tips: Git是一个免费和开源的 分布式版本控制系统,旨在处理从小到 非常大的项目,速度和效率。Git很容易学习, 占地面积小,性能快如闪电。 它超越了配置管理工具,如Subversion、CVS、Perforce和ClearCase 具有廉价的本地分支等功能,方便的集结地,以及 多个工作流。

1、Git官网
Git官方网站
https://git-scm.com/download/win
- 打开官网,根据自己的电脑系统选择32位或64位版本进行下载。
- 双击安装包开始安装:等待下载完成后,双击安装包开始安装过程。
- 选择安装目录:在安装过程中,可以选择Git的安装目录,可以使用默认目录或指定其他目录。
- 选择安装组件:根据自己的需求选择需要安装的Git组件。
- 设置开始菜单目录名称:在安装过程中,可以选择开始菜单中Git的目录名称,默认即可。
- 选择命令行环境:根据喜好选择是否使用Git的命令行环境。
- 调整PATH环境变量:选择是否将Git的可执行文件路径添加到系统的PATH环境变量中,这样可以在任何目录下直接使用Git命令。
- 开始安装:确认配置无误后,点击“Install”按钮开始安装Git。
- 完成安装:等待安装完成后,点击“Finish”按钮退出安装程序。
2、安装完成后,您可以通过打开终端窗口并输入命令`git --version`来检查Git是否安装成功。如果返回Git的版本信息,则表示安装成功。

3、验证安装是否成功,还可以在桌面右击鼠标,如果看到两个Git相关的选项(如“Git Bash Here”和“Git GUI Here”),则说明Git已经成功安装。

这样下来,就可以在Vscode中使用Vue进行开发,并在Chrome中进行调试工作啦!
创作不易,感觉有用,就一键三连,感谢(●'◡'●)
相关文章:
前端配置开发环境,新电脑配置前端开发环境,Vue开发环境配置的详细过程(前端开发环境配置,电脑重置后配置前端开发环境)
简介:有时候,我们需要在新电脑 或者 电脑重置后,配置前端开发环境,具体都需要安装什么软件和插件,这里来记录一下(文章适合新手和小白,大佬可以带过)。 ✨前端开发环境,需…...
大模型(LLM)的量化技术Quantization原理学习
在自然语言处理领域,大型语言模型(LLM)在自然语言处理领域的应用越来越广泛。然而,随着模型规模的增大,计算和存储资源的需求也急剧增加。为了降低计算和存储开销,同时保持模型的性能,LLM大模型…...
2024.03.01作业
1. 基于UDP的TFTP文件传输 #include "test.h"#define SER_IP "192.168.1.104" #define SER_PORT 69 #define IP "192.168.191.128" #define PORT 9999enum mode {TFTP_READ 1,TFTP_WRITE 2,TFTP_DATA 3,TFTP_ACK 4,TFTP_ERR 5 };void get_…...
力扣hot100:42.接雨水
什么时候能用双指针? (1)对撞指针: ①两数和问题中可以使用双指针,先将两数和升序排序,可以发现规律,如果当前两数和大于target,则右指针向左走。 ②接雨水问题中,左边最…...
搜索回溯算法(DFS)1------递归
目录 简介: 递归问题解题的思路模板 例题1:汉诺塔 例题2:合并两个有序链表 例题3:反转链表 例题4:两两交换链表中的节点 例题5:Pow(x,n)-快速幂 结语: 简介&…...
workstation 用途
一 workstation 用途 强大的桌面虚拟化 允许创造多种操作系统可以不用重启就跨不同操作系统进行操作可以提供隔离的安全环境 连接到vsphere 可以远程登陆服务器管理物理主机和虚拟主机任何时间都可登陆提高虚拟机效率 为任何平台开发和测试 1)借助一台单一本地…...
【三维重建】【SLAM】SplaTAM:基于3D高斯的密集RGB-D SLAM(CVPR 2024)
题目:SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM 地址:spla-tam.github.io 机构:CMU(卡内基梅隆大学)、MIT(美国麻省理工) 总结:SplaTAM,一个新…...
Go Barrier栅栏
1. 简介 实现与pythonthreading.Barrier库类似的功能,多线程同时等待达到指定数量一起放行。 有待改进地方: wait方法没有支持context控制。 2. 代码 import ("context""golang.org/x/sync/semaphore""sync/atomic" …...
[蓝桥杯 2023 省 B] 冶炼金属
P9240 [蓝桥杯 2023 省 B] 冶炼金属 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 参考题解: #C3150——蓝桥杯2023年第十四届省赛真题-冶炼金属(分块)-Dotcpp编程社区 https://www.bilibili.com/video/BV1wc411x7KU/?spm_id_from333.1007.top_right_bar_windo…...
续Java的执行语句、方法--学习JavaEE的day07
day07 一、特殊的流程控制语句 break(day06) continue 1.理解: 作用于循环中,表示跳过循环体剩余的部分,进入到下一次循环 做实验: while(true){ System.out.println(“111”); System.out.println(“222”); if(true){ conti…...
公网IP怎么获取?
公网IP是网络中设备的唯一标识符,用于在Internet上进行通信和定位。对于普通用户来说,了解如何获取自己的公网IP是很有必要的,本文将介绍几种获取公网IP的方法。 方法一:通过路由器查询 大多数家庭和办公室使用的路由器都会有一个…...
连接未来:探索嵌入式系统的智能化之路
连接未来:探索嵌入式系统的智能化之路 嵌入式系统的智能化是连接未来的关键之一。以下是对这一主题的小点论述: 1. 嵌入式系统的定义和特点 嵌入式系统是一种特殊用途的计算机系统,通常嵌入在其他设备中,具有小巧、低功耗、实时…...
基于STM32制作的示波器(可对任意信号进行描点)
基于STM32制作的示波器(可对任意信号进行描点) 注意:用的屏幕是TFT-LCD(MCU 屏)正点原子同款屏幕 液晶显示器,即 Liquid Crystal Display,利用了液晶导电后透光性可变的特性,配合显…...
WEB APIs (5)
window对象 BOM(浏览器对象模型) 其为js操作浏览器提供了方法 window对象是一个全局变量,是BOM树根节点 BOM的属性和方法都是window的,如document、console.log()等 var定义在全局全局作用域中的变量、函数都会变成window对象…...
物联网常见协议篇
在物联网环境中,物联网协议承担着关键作用,而新手了解物联网协议如传输协议、通讯协议和行业协议等。 一、物联网协议 物联网协议是物联网环境中的关键组成部分,它承担着设备间通信和数据传输的重要任务。这些协议根据其作用的不同ÿ…...
Kubernetes-1
学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件,相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…...
SpringMVC框架②
三、RequestMapping注解 3、RequestMapping注解的value属性 必须设置 发送一个请求最直观的表示方式就是一个请求路径 altenter 进入接口方法 再用 alte7 查看里面的属性 value值可以是数组 value{"test","test1"} 只满足任何一个请求地址就会调用此方…...
springboot230基于Spring Boot在线远程考试系统的设计与实现
在线远程考试系统设计与实现 摘 要 信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到…...
盘点:国家智能算力中心
文章目录 1. Main2. My thoughtsReference 1. Main 按照《中国算力白皮书(2022年)》的定义,算力主要分为四部分:通用算力、智能算力、超算算力、边缘算力。通用算力以CPU芯片输出的计算能力为主;智能算力以GPU、FPGA、…...
【C++】7-2 寻找完美数 分数 10
7-2 寻找完美数 分数 10 全屏浏览 切换布局 作者 李祥 单位 湖北经济学院 所有真因子之和小于其本身的数称为亏数。 如:4 的真因子 1、2 之和为 3,小于 4,是亏数。 所有真因子之和大于其本身的数称为盈数。 如:12 的真因子 1…...
智能游戏体验革新:League-Toolkit如何重新定义英雄联盟辅助工具
智能游戏体验革新:League-Toolkit如何重新定义英雄联盟辅助工具 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英雄联盟…...
AITINKR_JSON_FIELDS:面向MCU的零碎片JSON字段管理库
1. AITINKR_JSON_FIELDS 库深度解析:面向资源受限 IoT 设备的动态 JSON 字段管理方案在嵌入式物联网设备开发中,JSON 已成为事实上的数据交换标准。从传感器数据上报、OTA 配置下发,到设备状态同步与远程控制指令解析,JSON 的轻量…...
Debian 12 内网求生记:手把手搞定1Panel离线安装与Docker启动(附iptables补丁)
Debian 12 内网求生记:手把手搞定1Panel离线安装与Docker启动(附iptables补丁) 1. 内网环境下的技术挑战 在完全隔离的内网环境中部署现代化运维工具,就像在没有GPS的荒野中寻找方向。我们面对的不仅是网络连接的缺失,…...
星穹铁道自动化终极指南:三月七小助手让你的游戏时间翻倍
星穹铁道自动化终极指南:三月七小助手让你的游戏时间翻倍 【免费下载链接】March7thAssistant 崩坏:星穹铁道全自动 三月七小助手 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 在《崩坏:星穹铁道》这款深受玩家喜…...
RAG系统提示词重构核心要点,深度拆解核心问题架构与应对方案,实战演练
将针对企业级应用优化的Prompt工程方法论迁移至RAG(检索增强生成)系统时,需要进行系统性的范式重构。这并非简单的指令复用,而是涉及从单体模型指令到“检索-生成”双阶段协同的体系升级。 问题解构与核心挑战 企业级RAG系统引入…...
Go Channel 死锁排查经验
Go Channel 死锁排查经验 在Go语言中,Channel是协程间通信的重要工具,但使用不当容易引发死锁。死锁问题往往难以定位,尤其是高并发场景下,排查起来更加棘手。本文将分享几个实用的死锁排查经验,帮助开发者快速定位并…...
独立创业自动化系统构建指南:从副业到被动收入的实践路径
独立创业自动化系统构建指南:从副业到被动收入的实践路径 【免费下载链接】opc-methodology 《一人企业方法论》第二版,也适合做其他副业(比如自媒体、电商、数字商品)的非技术人群。 项目地址: https://gitcode.com/GitHub_Tre…...
如何永久保存微信聊天记录?WeChatMsg免费工具终极使用指南
如何永久保存微信聊天记录?WeChatMsg免费工具终极使用指南 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...
ROS 2从入门到精通系列(八):参数与配置 - Launch文件进阶实战与架构设计
1. Launch文件在复杂系统中的核心价值 第一次接触ROS 2的Launch文件时,我把它当成了简单的启动脚本。直到参与一个自动驾驶小车项目,需要同时协调5个激光雷达、3个摄像头和多个算法节点时,才真正理解它的威力。Launch文件本质上是一个系统级编…...
如何实现Vuetify与GraphQL Code Generator的完美结合:终极类型安全数据获取指南
如何实现Vuetify与GraphQL Code Generator的完美结合:终极类型安全数据获取指南 【免费下载链接】vuetify 🐉 Vue Component Framework 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify 在现代Web开发中,Vuetify组件框架与Graph…...

