从0开始搭建前端开发环境

217 阅读3分钟

简介

笔者最近换了新电脑,需要重新搭建前端开发环境。顺手记录,仅参考。本文以window11为例。

主要流程

  1. 安装Git
  2. 搭建node环境
    1. nvm的安装
    2. Node.js安装
    3. Node.js版本控制
    4. 镜像源配置
  3. 编码环境搭建
    1. 编译器下载
    2. 配置同步
    3. 插件推荐

Step1 安装Git

打开官网选择自己需要版本

下载地址: Git - Downloading Package (git-scm.com)

image.png

下载完成后,双击打开程序,里面是一些Git的配置项,可以根据个人喜好配置,无特殊需求的一直点Next即可完成安装。

Step2 搭建node环境


Step2-1 nvm的安装

这里建议先安装nvm,便于后续进行Node的版本控制。

nvm的作用:前端项目大都基于Node环境搭建,但依赖的Node版本往往不太一致。通过nvm可以有效避免在不同项目之间Node版本冲突问题,提高开发效率。

下载地址:Releases · coreybutler/nvm-windows (github.com)

image.png

下载完成后双击文件,界面如下

image.png

第一项是MIT协议,勾选I accept the agreement即可。后续是一些关于存放路径的配置,根据个人情况调整即可。

安装完成后可以通过cmd查看是否安装成功

image.png

键入nvm,输出版本号即安装成功

image.png

Step2-2 Node.js安装

直接下载Node会比较慢,可以通过配置镜像源的方式来提升下载速度。在cmd中键入下列命令即可配置淘宝镜像源。

    nvm node_mirror https://npm.taobao.org/mirrors/node/ 
    nvm npm_mirror https://npm.taobao.org/mirrors/npm/

image.png

安装node前使用命令,查看可安装的Node版本

nvm list available

image.png

一般选择LTS(长期支持版本)下载即可

下载指定版本命令如下

npm install --version

image.png

Step2-3 Node.js 版本控制

已下载版本查看

nvm ls

版本切换

nvm use --version

image.png

Setp2-4 nrm的安装(可选)

通过nrm能控制下载源

nrm的作用:使用官方的镜像源下载npm包往往会较慢,但是有时国内的镜像源下载一些文件可能会出现意料之外的问题,或者一些npm包是在私源上的。此时使用nrm就可以便利的切换下载源。

安装nrm时由于下载源是国外网站可能会比较慢或卡住,存在该问题的需要先将npm的下载源切换至其他镜像源。

npm config set registry https://registry.npm.taobao.org

image.png

通过 nrm -V 可以查看是否安装成功,部分用户可能由于安全策略的问题导致nrm命令运行失败。可以通过键入 set-ExxecutionPolicy RemoteSigned 解决。

image.png

使用 nrm ls 查看可选下载源,切换命令 nvm use --name。 绿色✳代表的是的当前的下载源。

image.png

Step3 编码环境搭建

Step3-1

主流的前端IDE有 Vscode \ WebStorm \ SublimeText 等等

此处以Vscode为例

下载地址:Download Visual Studio Code - Mac, Linux, Windows

Step3-2 配置同步(可选)

下载完成后可以通过Vscode的同步功能实现同步插件与设置,之前没有配置过Vscode的可以跳过该步骤。

只需在新旧Vscode分别开启配置同步并登录账号即可完成配置同步。

Step 3-3 插件推荐

Vscode中文语言包

image.png

为网页构建本地web服务,实现网页的热更新。

image.png

代码格式化工具

image.png

css提示与定位

image.png

还有如MarkDown、React\Vue语法提示等等插件,可以根据个人需求自行选择安装。