简介
笔者最近换了新电脑,需要重新搭建前端开发环境。顺手记录,仅参考。本文以window11为例。
主要流程
- 安装Git
- 搭建node环境
- nvm的安装
- Node.js安装
- Node.js版本控制
- 镜像源配置
- 编码环境搭建
- 编译器下载
- 配置同步
- 插件推荐
Step1 安装Git
打开官网选择自己需要版本
下载地址: Git - Downloading Package (git-scm.com)
下载完成后,双击打开程序,里面是一些Git的配置项,可以根据个人喜好配置,无特殊需求的一直点Next即可完成安装。
Step2 搭建node环境
Step2-1 nvm的安装
这里建议先安装nvm,便于后续进行Node的版本控制。
nvm的作用:前端项目大都基于Node环境搭建,但依赖的Node版本往往不太一致。通过nvm可以有效避免在不同项目之间Node版本冲突问题,提高开发效率。
下载地址:Releases · coreybutler/nvm-windows (github.com)
下载完成后双击文件,界面如下
第一项是MIT协议,勾选I accept the agreement即可。后续是一些关于存放路径的配置,根据个人情况调整即可。
安装完成后可以通过cmd查看是否安装成功
键入nvm,输出版本号即安装成功
Step2-2 Node.js安装
直接下载Node会比较慢,可以通过配置镜像源的方式来提升下载速度。在cmd中键入下列命令即可配置淘宝镜像源。
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
安装node前使用命令,查看可安装的Node版本
nvm list available
一般选择LTS(长期支持版本)下载即可
下载指定版本命令如下
npm install --version
Step2-3 Node.js 版本控制
已下载版本查看
nvm ls
版本切换
nvm use --version
Setp2-4 nrm的安装(可选)
通过nrm能控制下载源
nrm的作用:使用官方的镜像源下载npm包往往会较慢,但是有时国内的镜像源下载一些文件可能会出现意料之外的问题,或者一些npm包是在私源上的。此时使用nrm就可以便利的切换下载源。
安装nrm时由于下载源是国外网站可能会比较慢或卡住,存在该问题的需要先将npm的下载源切换至其他镜像源。
npm config set registry https://registry.npm.taobao.org
通过 nrm -V 可以查看是否安装成功,部分用户可能由于安全策略的问题导致nrm命令运行失败。可以通过键入 set-ExxecutionPolicy RemoteSigned 解决。
使用 nrm ls 查看可选下载源,切换命令 nvm use --name。 绿色✳代表的是的当前的下载源。
Step3 编码环境搭建
Step3-1
主流的前端IDE有 Vscode \ WebStorm \ SublimeText 等等
此处以Vscode为例
下载地址:Download Visual Studio Code - Mac, Linux, Windows
Step3-2 配置同步(可选)
下载完成后可以通过Vscode的同步功能实现同步插件与设置,之前没有配置过Vscode的可以跳过该步骤。
只需在新旧Vscode分别开启配置同步并登录账号即可完成配置同步。
Step 3-3 插件推荐
Vscode中文语言包
为网页构建本地web服务,实现网页的热更新。
代码格式化工具
css提示与定位
还有如MarkDown、React\Vue语法提示等等插件,可以根据个人需求自行选择安装。