网站建设的一些问题,wordpress后台入口,网站网页设计案例,广州专业展台制作目录 引言一、Vscode编辑器安装1. 软件下载2. 软件安装3. 插件安装 二、Nodejs环境安装及版本控制1. 安装内容2. 使用nvm安装2.1 软件下载并安装2.2 nvm基本指令2.3 nvm下载过慢导致超时解决 三、git安装及配置1. 软件下载2. 软件安装3. 基础配置 四、总结 引言 本系列教程旨在… 目录 引言一、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. 安装内容
主要包含两部分内容
NodejsJavaScript 运行时环境。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
