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

【前端开发入门】前端开发环境配置

目录

  • 引言
  • 一、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. 安装内容

主要包含两部分内容:

  1. Nodejs:JavaScript 运行时环境。
  2. npm:依赖包管理工具。
  3. 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命令行工具,常用以下指令:

  1. 查看本地nodejs列表或可用node版本列表,在浏览器中访问右下角地址可以查看历史更多的nodejs版本号。
# 查看本地都已经安装了那些版本的nodejs
nvm list# 查看可支持下载的nodejs版本列表
nvm list available

在这里插入图片描述

  1. 下载指定版本nodejs,根据我这边的业务需求,我选择 16.20.218.20.4 这两个版本。
nvm install 16.20.2

下载完成后如下:
在这里插入图片描述

  1. 使用指定版本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的日常操作指令会在接下来的教程中详细阐明,本篇仅作为安装及基础配置向导。

四、总结

以上即完成了前端开发基础环境的安装和配置,并不会一开始就全部使用,你会在逐步的学习过程中慢慢接触使用到以上所有内容。这些都是必须的软件及环境。

你在前端学习的过程中将经历以下几个阶段:

  1. 前端入门阶段,你将学习html、css、js的知识,这阶段你仅用到了vscode编辑器和浏览器。
  2. 前端进阶阶段,你将学习vue或react等前端框架知识,这个阶段你将用到nodejs和npm用于构建代码和依赖管理。
  3. 投入工作阶段,你将参与到团队的开发工作中,这个阶段你将使用git或是其他版本控制工具,用于和更多的人共同协作完成一个前端项目。
  4. 自主探索前端领域,这个阶段自由发挥。

本文涉及到的软件:

  • 链接:下载链接
  • 提取码: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

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

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

C# winform教程(二)----checkbox

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

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

Yii2项目自动向GitLab上报Bug

Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...