【前端开发入门】前端开发环境配置
目录
- 引言
- 一、Vscode编辑器安装
- 1. 软件下载
- 2. 软件安装
- 3. 插件安装
- 二、Nodejs环境安装及版本控制
- 1. 安装内容
- 2. 使用nvm安装
- 2.1 软件下载并安装
- 2.2 nvm基本指令
- 2.3 nvm下载过慢导致超时解决
- 三、git安装及配置
- 1. 软件下载
- 2. 软件安装
- 3. 基础配置
- 四、总结
引言
本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容,并不代表这部分内容不重要,只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端,细节技巧性内容,可以在后续的开发工作中自行发现并掌握。
本篇主要介绍前端开发必要的开发环境配置及软件安装,包含:
- 开发编辑器vscode及相关插件。
- Nodejs运行环境安装及版本控制。
- git软件安装及基础配置
本篇设计的所有软件我已经打包放在网盘在文章末尾自取,也可以通过文章顶部资源下载。
一、Vscode编辑器安装
1. 软件下载
根据操作系统选择下载安装对应版本编辑器。
下载地址:vscode下载
2. 软件安装
根据安装提示,选择好安装位置(除了c盘都行),其余的都采用默认选项下一步即可。
其中有一个步骤需要做几个勾选,确保后期可以更加便捷的打开vscode,按照如下图勾选就行。
3. 插件安装
vscode编辑器受欢迎的主要原因是强大的插件系统,几乎所有的功能都可以通过插件拓展,你甚至可以自己开发一个插件发布上架。
推荐几个前期必备的几个插件,如下图所示:
简单介绍下这几个插件的作用:
- Auto Rename Tag
:html标签一般都是成对出现的,如果你需要修改标签名则需要两个都同步修改才行。这个插件帮助你在修改标签名时只需要修改开头,结尾的标签名会同步进行修改,加快开发效率。
- Chinese Language Pack
:顾名思义汉化包,英文水平好的可以不安装。
- Live server
:一个小型服务器插件,帮助你在开发简单html时开启一个服务,可以在浏览器同步查看开发效果,并支持代码热更新。
- Prettier
:代码格式化工具,帮助你优化代码格式,快捷键为 shift + alt + f
第一次使用会提示你配置格式化规则,选择Prettier就行。
当然还有很多优秀的vscode插件,可能前期用不到就不一一介绍了,后期有机会再专门推荐。
二、Nodejs环境安装及版本控制
1. 安装内容
主要包含两部分内容:
- Nodejs:JavaScript 运行时环境。
- npm:依赖包管理工具。
- npm一般会随nodejs一起安装,不需要单独安装。
因为不同项目可以对于nodejs版本的要求不同,所以往往前端开发的电脑上会安装多个版本的nodejs。我们通过nvm这个工具去下载和管理nodejs版本。
2. 使用nvm安装
nvm是nodejs的版本管理工具,通过nvm下载不同版本的nodejs,以适应不同项目需求。
本教程以windows操作系统为例。
2.1 软件下载并安装
下载地址:nvm-windows
在Assets区域找到并下载nvm-setup.exe
按照安装指引默认选项下一步即可完成安装。
如何确认安装成功?
打开cmd命令行工具,输入 nvm
出现以下内容就表示安装成功
2.2 nvm基本指令
建议使用管理员身份打开cmd命令行工具,常用以下指令:
- 查看本地nodejs列表或可用node版本列表,在浏览器中访问右下角地址可以查看历史更多的nodejs版本号。
# 查看本地都已经安装了那些版本的nodejs
nvm list# 查看可支持下载的nodejs版本列表
nvm list available
- 下载指定版本nodejs,根据我这边的业务需求,我选择
16.20.2
和18.20.4
这两个版本。
nvm install 16.20.2
下载完成后如下:
- 使用指定版本nodejs
nvm use 16.20.2
执行完成后,顺便查看node版本和npm版本,确保已经安装完成。当需要切换nodejs版本时,先使用 nvm list
查看本地已有的node版本,然后使用 nvm use xx.xx.xx
切换到指定版本。
2.3 nvm下载过慢导致超时解决
找到nvm的安装目录,默认路径是 C:\Users\Administrator\AppData\Roaming\nvm
其中Administrator替换为你的用户名,打开目录下的setting.txt文件。
添加下载镜像地址并保存退出。
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
三、git安装及配置
git是前端常用的版本控制工具,会在日后的团队协作项目中使用到。
1. 软件下载
还是以windows操作系统为例:
下载地址: git下载
选择对应系统位宽的版本,或者直接点击 click here to download
。
2. 软件安装
一路next安装即可,没有特殊配置。
通过在cmd中输入 git -v
查看版本号以确认安装完成。
3. 基础配置
设置用户签名
- 配置用户名: git config --global user.name 你的用户名
- 配置邮箱: git config --global user.email 注册的邮箱
- 配置好之后,可以用git config --global --list命令查看配置
这里的配置仅作为提交git记录时的标识,确认提交人的身份用。在实际项目中会单独配置git仓库的账户密码用于拉取、提交代码。
关于git的日常操作指令会在接下来的教程中详细阐明,本篇仅作为安装及基础配置向导。
四、总结
以上即完成了前端开发基础环境的安装和配置,并不会一开始就全部使用,你会在逐步的学习过程中慢慢接触使用到以上所有内容。这些都是必须的软件及环境。
你在前端学习的过程中将经历以下几个阶段:
- 前端入门阶段,你将学习html、css、js的知识,这阶段你仅用到了vscode编辑器和浏览器。
- 前端进阶阶段,你将学习vue或react等前端框架知识,这个阶段你将用到nodejs和npm用于构建代码和依赖管理。
- 投入工作阶段,你将参与到团队的开发工作中,这个阶段你将使用git或是其他版本控制工具,用于和更多的人共同协作完成一个前端项目。
- 自主探索前端领域,这个阶段自由发挥。
本文涉及到的软件:
- 链接:下载链接
- 提取码:8JZq
相关文章:

【前端开发入门】前端开发环境配置
目录 引言一、Vscode编辑器安装1. 软件下载2. 软件安装3. 插件安装 二、Nodejs环境安装及版本控制1. 安装内容2. 使用nvm安装2.1 软件下载并安装2.2 nvm基本指令2.3 nvm下载过慢导致超时解决 三、git安装及配置1. 软件下载2. 软件安装3. 基础配置 四、总结 引言 本系列教程旨在…...
Windows驱动开发(二)
1. NT和WDM式驱动 1. NT式驱动 传统的Windows系统驱动类型。NT式驱动的启动/停止/安装/卸载只能由 服务控制管理程序组件(SCM) 来完成的。 包括最简单的hello world,以及目前常用的文件过滤框架 minifilter 都是基于NT式实现的。 NT式驱动的最大特点即完全不依赖硬…...

Hotspot是什么?
Hotspot 简单来说,JVM的一种。 一、HotSpot 的官方定义 HotSpot 是 Oracle 公司开发的一个高性能的 Java 虚拟机(JVM)。它通过一系列先进的技术和优化手段,为 Java 应用程序提供高效的运行环境,实现了跨平台的代码执行…...

k8s-集群部署1
k8s-集群部署1 一、基础环境准备二、docker环境准备三、k8s集群部署1.kubeadm创建集群2.使用kubeadm引导集群 总结 一、基础环境准备 首先,需要准备三个服务器实例,这里我使用了阿里云创建了三个实例,如果不想花钱,也可以在VM上创…...

wordpress Contact form 7发件人邮箱设置
此教程仅适用于演示站有留言的主题,演示站没有留言的主题,就别往下看了,免费浪费时间。 使用了Contact form 7插件的简站WordPress主题,在有人留言时,就会发邮件到网站的系统邮箱(一般与管理员邮箱为同一个)里。上面显…...

15分钟学 Python 第38天 :Python 爬虫入门(四)
Day38 : Python爬虫异常处理与反爬虫机制 章节1:异常处理的重要性 在爬虫开发过程中,网络请求和数据解析常常会遭遇各种异常。正确的异常处理可以提高程序的稳定性,避免崩溃,并帮助开发者快速定位问题。 章节2:常见…...

GWAS分析中显著位点如何注释基因:excel???
大家好,我是邓飞。 今天星球的小伙伴问了一个问题: 我现在在做GWAS分析,现在已经找到性状关联的SNP位点,下一步我如何根据position 找到基因呢? 关于基因注释,之前写过一些博客,可以用到的软件…...
深入浅出 CSS 定位:全面解析与实战指南
“批判他人总是想的太简单 剖析自己总是想的太困难” 文章目录 目录 前言文章有误敬请斧正 不胜感恩!1. CSS 定位概述2. 定位类型详解2.1 static(默认定位)2.2 relative(相对定位)2.3 absolute(绝对定位&am…...

HTTPS协议详解:从原理到流程,全面解析安全传输的奥秘
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storm…...
Android 13.0 系统内存优化之修改dalvik虚拟机的内存参数
1.前言 在13.0的系统rom开发定制中,app应用也是运行在dalvik虚拟机上的,所以对于一些内存低的系统中,在某些大应用会出现耗内存 卡顿情况,这是系统分配的内存不够大,在进行耗内存的操作,就会出现频繁gc等等原因造成不流畅的现象,接下来就分析下 虚拟机分配内存的相关原理…...

C# 无边框窗体,加阴影效果、多组件拖动、改变大小等功能完美实现优化版效果体验
一、预览效果 国庆节第一天,祝祖国繁荣昌盛! 1.1 效果图 (WinForm无边框窗体,F11可全屏) 拖动窗体时半透明效果(拖动时参考窗体后面释放位置) 说明:本功能的实现基于网友的原型完善而来,更多代码可以参考他的文章 h...
深入解析 ChatGLM 模型:核心原理、优势与未来应用前景
1. 引言 1.1 ChatGLM 模型概述 ChatGLM 是一类基于自回归语言模型的生成式预训练模型,专门设计用于处理对话系统中的自然语言生成任务。ChatGLM 模型依托于 Transformer 架构,具备高度并行化的计算能力,并能够捕捉长距离的语言依赖关系。在…...
python全栈学习记录(二十二)多态性、封装、绑定方法与非绑定方法
多态性、封装、绑定方法与非绑定方法 文章目录 多态性、封装、绑定方法与非绑定方法一、多态性二、封装三、绑定方法与非绑定方法 一、多态性 多态指的是同一种事物的多种形态,如水:冰、水蒸气、液态水,又如动物:猫、狗、猪。 多…...
用Python制作自己的聊天机器人:从零开始构建智能对话助手
解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 近年来,聊天机器人已经成为日常生活中不可或缺的工具,从自动客服到个人助手,聊天机器人在各类应用中广泛存在。如果你想了解如何制作一个自己的聊天机器人,那么这篇文章将带你一步步实现这个目标。我们将使用…...

LabVIEW裂纹深度在线监测系统
随着铁路运输技术的快速发展,火车安全问题成为重中之重,尤其是轮面裂纹的检测和管理。裂纹的出现可能导致严重的列车事故,因此,建立可靠的在线监测系统,实时掌握裂纹情况,对保障铁路运输安全至关重要。 La…...
工业物联网的伦理和社会影响
随着科技的飞速发展,工业物联网(IIoT)已经成为现代工业领域的重要组成部分。它通过将各种设备、传感器和系统连接起来,实现了生产过程的智能化、自动化和高效化。然而,在享受工业物联网带来的巨大便利和经济效益的同时…...

TCP --- 确认应答机制以及三次握手四次挥手
序言 在前一篇文章中,我们介绍了 UDP协议 (点击查看)👈,该协议给我们的感觉就两个字 — 简单,只是将我们的数据进行简单的添加报头然后发送。当然使用起来虽然简单,但是否能送到目的地,那就要看网络的状态了…...
GPT带我学-设计模式17-装饰器模式
概述 装饰器模式(Decorator Pattern)是一种结构型设计模式,允许你在不改变对象接口的前提下,动态地给对象添加新功能。这个模式通常用于扩展类的功能。 基本结构 组件接口(Component):定义一…...

【Redis】如何在 Ubuntu 上安装 Redis 5
🥰🥰🥰来都来了,不妨点个关注叭! 👉博客主页:欢迎各位大佬!👈 本期内容主要介绍如何在 Ubuntu 上安装 Redis5 一些碎碎念: 本来这期内容介绍如何在 Centos 安装 Redis …...

房屋水电费记账本:内置的数组数据击按钮不能删除,页面手动添加的可以删除
<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>房租水电费记录</title><script type&qu…...

cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...

基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...

C# winform教程(二)----checkbox
一、作用 提供一个用户选择或者不选的状态,这是一个可以多选的控件。 二、属性 其实功能大差不差,除了特殊的几个外,与button基本相同,所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

【若依】框架项目部署笔记
参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作: 压缩包下载:http://download.redis.io/releases 1. 上传压缩包,并进入压缩包所在目录,解压到目标…...
Yii2项目自动向GitLab上报Bug
Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...