怎么用 WebStorm 运行前端代码？

背景

昨天在运行前端代码的时候捣鼓了一整天，直到晚上八点多才运行起来，真的好累......

我的电脑就装了一个 WebStorm，其他的什么都没有。我把设备管理系统的前端代码拉下来之后，然后就束手无策了，因为运行不了。想要运行还要配置一些东西才行。我询问了睿哥，睿哥叫我先装一个 nvm。

我也就照装了，在 nvm 中还装了很多个不同版本的 Node.js，但是还是跑不了。然后睿哥就叫我在代码内部装一个 yarn 的插件，这样就能跑起来了。我照装，装完后，就真的跑起来了。

看我的描述，你可能觉得这一切都很顺利，但其实我忙碌了一天，其中遇到了很多问题，这些问题我都省略了，没说出来而已。反正就是迷迷糊糊的，我都不清楚为什么就能跑起来，就很懵。

所以今天我决定整理一下昨天的思路，理清一下，假如我们想跑通一个前端代码，到底需要做什么。

运行前端代码前要下载的东西

下载WebStorm

首先，如果你想运行一个前端的代码，你就要下载一个 WebStorm。俗话说的好，代码写不好，但开发工具必须选的好。（PS：好像很多人觉得 WebStorm 是最好的前端开发工具）

下载Node.js

有了开发工具 WebStorm 之后，下一步我们就要下载 Node.js 了。

Node.js 给前端代码提供了一个运行时环境，和后端的 JDK 有点像。

我们选择下载 nvm 而不是 Node.js，为什么呢？

因为 nvm 是管理 Node.js 版本的工具，在 nvm 中可以下载不同版本的 Node.js，并且可以轻松切换不同的版本。

我们先下载安装好nvm，然后就可以在命令行用 nvm 的命令下载 Node.js 了。

比如在命令行里输入：nvm list available，就可以看到可以安装的 Node.js 版本。

然后你也可以 nvm install 18.18.2，这就安装了这个18.18.2版本的 Node.js 了。

你还可以用 nvm ls 命令，来查看你安装了哪些版本的 Node.js。

然后你还可以 nvm use 18.17.1，这样就可以使用这个版本的 Node.js 了。如果你想用其他版本，你就直接用这个命令切换就好了。

下载yarn

下载好 Node.js 后，最后一步就是下载 yarn。yarn 是 Node.js 的包管理工具，有点像后端的Maven。我们在命令行里输入 yarn install，就把 yarn 给下载下来了。需要注意的是，这个 yarn 应该在你的代码里下载，如图：

运行前端代码

OK！现在，我们已经可以跑代码了。跑代码可以从命令行里直接跑，也可以用 WebStorm 跑。

如果你从命令行跑，就直接用命令：yarn run start，结果是这样的：

如果你从 WebStorm 跑，那就是这样的：

跑完之后是这样的：

至此，前端代码就跑起来了。我们可以在浏览器访问这个地址了。