3小时跑通第一个WebApp：新手必装的3样工具、必写的5行代码、必避的2个环境坑

2026-02-13 10:37:00

阅读 9675次标签：开发作者： yipinweike01

　　你有没有过这种“收藏从未停止，开发从未开始”的时刻?

　　想学WebApp开发，刷了20个教程，收藏了30个链接，甚至买了两本书。周末坐在电脑前，打开一个教程，第一步：“安装Node.js”。你心想，Node.js是什么?装哪儿?装完怎么知道装没装对?

　　于是你去搜Node.js是什么，然后看到npm，看到nvm，看到webpack，看到Vue CLI，看到“建议先学HTML、CSS、JavaScript基础”。

　　三天后，你连Node.js还没装上，电脑里倒是多了三个编辑器、两个浏览器、一个摸鱼时玩的2048。

　　你不是不想学，你是被“准备清单”吓住了。

　　今天这篇文章，不说废话，不带货，不让你先看200集入门课。

　　我带你3小时跑通第一个WebApp开发。

　　什么叫跑通?不是“看懂了”“学会了”“记了笔记”——是你的代码，跑在浏览器里，地址栏是localhost开头，你妈在旁边看了一眼，说“哟，这是你做的?”

　　就这。够不够?

　　3小时，三样工具，五行代码，两个坑。少一个你来找我。

　　第一部分：必装的3样工具(30分钟)

　　新手最怕的不是工具难，是不知道到底需要哪些工具。教程说装A，弹窗说缺B，装B又说要升级C。还没开始，环境先崩了。

　　停。我们只装三样，多一个都不装。

　　第1样：Visual Studio Code(简称VS Code)

　　这是什么?

　　写代码的编辑器。不神秘，就是Word，只不过Word写作文，它写网页。

　　怎么装?

　　浏览器搜“VS Code”，第一条点进去

　　戳那个大大的蓝色“Download”按钮

　　下载完双击，一路“下一步”，全选默认选项，不要改任何路径

　　装完打开，看到欢迎页，成了

　　避坑提示：

　　不要去搜“VS Code最好用的20个插件”!你现在不需要。插件是鞋带，你鞋还没穿上呢。

　　效果：

　　你有了一个写代码的地方。看着挺专业，其实半小时前你连它名字都没听过——现在已经装好了。

　　第2样：Node.js(含npm)

　　这是什么?

　　你不需要懂它是什么。你只需要知道：装了这个，你才能跑今天我们要做的那个WebApp。

　　怎么装?

　　浏览器搜“Node.js”

　　进官网，看到两个大按钮，左边写着“LTS”，戳左边那个

　　下载完双击，一路“下一步”，还是全默认，别改

　　装完，重启电脑(这步很多人忘)

　　怎么知道装没装对?

　　打开VS Code

　　点菜单栏“终端”→“新建终端”

　　在黑框里输入：node -v

　　回车，如果蹦出一行v18.xx.x之类的数字——成了

　　效果：

　　你拥有了让电脑听懂“跑起来”命令的能力。这行数字，是你的第一枚军功章。

　　第3样：Vite(别怕，不是让你手动装)

　　这是什么?

　　一个帮你“一键生成WebApp”的工具箱。放在十年前，这步你要配置一下午。现在，一行命令，它把脚手架全给你搭好。

　　怎么装?

　　不需要单独装。Vite会在你建项目的时候自动下载。你只需要确保上一步Node.js装好了。

　　效果：

　　你将在这行命令里，完成人生第一次“项目初始化”。

　　第二部分：必写的5行代码(90分钟)

　　工具齐了。现在开始，你真的要写代码了。

　　不是复制粘贴，是你一个字一个字敲进去。

　　这5行，是你的投名状。

　　第1步：建项目(这步不算行数，是前戏)

　　在VS Code里，点“终端”→“新建终端”

　　在黑框里输入(复制也行，我不笑你)：

　　npm create vite@latest my-first-app -- --template vue

　　回车，等它跑。看到Done. Now run:，说明生出来了

　　继续输入：

　　cd my-first-app

　　npm install

　　npm install这步会跑几十秒，去倒杯水，别看它，焦虑

　　你此刻的成果：

　　硬盘里多了一个叫my-first-app的文件夹。里面装着十几个文件，都是Vite帮你生的。你不用全看懂，你只需要知道——你的WebApp，就住在这个文件夹里。

　　第2步：找到那个文件(30秒)

　　在VS Code左边，点那个“文件夹”图标

　　找到src文件夹，点开

　　找到App.vue，双击

　　你现在看到的内容，就是你WebApp的“脸面”。

　　把里面所有代码全删了。一个字不留。

　　删完会有点慌，没关系。空白的画布，才能画第一笔。

3小时跑通第一个WebApp：新手必装的3样工具、必写的5行代码、必避的2个环境坑

　　你刚才删空的那个文件，现在变成了一个网页。你写的字，正从你电脑的5173端口，流向浏览器的地址栏。

　　这就是WebApp。这就是你3小时前的那个“想都不敢想”。

　 3小时跑通第一个WebApp：新手必装的3样工具、必写的5行代码、必避的2个环境坑

　　坑1：路径不对，系统说“找不到命令”

　　场景：

　　你在终端输入npm run dev，系统回你：'npm' 不是内部或外部命令，也不是可运行的程序。

　　原因：

　　Node.js装了，但安装时没勾“自动加入PATH”。PATH是电脑的环境变量，没它，系统不知道你喊的npm是谁。

　　怎么避：

　　安装Node.js时，不要一路无脑“下一步”

　　到那步写着“Automatically install……”的，把勾打上

　　如果已经装完才发现，卸了重装。5分钟的事，别跟自己较劲

　　已经踩进去了怎么办?

　　搜“系统环境变量”

　　找到Path，编辑

　　把Node.js的安装路径加进去(默认是C:Program Filesnodejs)

　　重启电脑，重试

　　这不是你的问题。是安装包设计者默认你懂PATH。现在你懂了，以后再也不怕了。

　　坑2：端口被占用，localhost打不开

　　场景：

　　npm run dev跑成功了，也显示Local: http://localhost:5173/，但点进去，白屏转圈，或者直接报错“无法访问此网站”。

　　原因：

　　5173端口被别的程序占了。可能是你之前跑过另一个项目没关，也可能是某软件习惯性占着这个数。

　　怎么避：

　　每次跑完项目，在终端按Ctrl+C，选Y，关干净

　　不要只点浏览器叉，后台进程还在跑

　　已经踩进去了怎么办?

　　方法A(新手友好)：

　　关掉VS Code所有终端

　　重新开一个

　　输入npm run dev -- --port 5174

　　用新的端口访问

　　方法B(一劳永逸)：

　　找到项目根目录的vite.config.js

　　加一行：server: { port: 3000 }

　　从此固定用3000端口，清净了

　　这两个坑，每个踩进去的人，都怀疑过自己“是不是不适合学编程”。

　　你不是不适合。你只是没听说过PATH和端口。

　　现在听过了，以后它们就是你的老朋友。

3小时跑通第一个WebApp：新手必装的3样工具、必写的5行代码、必避的2个环境坑

　　常见问答

　　问：为什么选Vue，不选React?

　　答：因为Vue的单文件组件(.vue)对新手视觉干扰最小。React要写JSX，要理解“函数返回UI”，心智负担重一档。第一个项目，选那个让你最快看到结果的。成就感比选边站队重要一万倍。

　　问：HTML、CSS、JavaScript一点不会，能跟下来吗?

　　答：今天这篇，不需要你会。你只需要会打字，会回车。但跑通之后，建议你还是要去补一下基础。不然你只能改文字，没法改样式，没法加交互。你现在知道路怎么走了，补地图不迟。

　　问：localhost:5173只能在自家电脑看，怎么让别人也看到?

　　答：那是下一步的事(部署)。今天的目标是让自己看到。你连让自己看到都没做到，不要操心全世界看到的事。一步一步来，步子大了，会卡在PATH上。

　　问：跑通了，然后呢?

3小时跑通第一个WebApp：新手必装的3样工具、必写的5行代码、必避的2个环境坑

　　问：3小时没跑通，是不是我不行?

　　答：3小时跑不通，可能是网络慢、可能是安装包下载卡住、可能是你妈喊你吃饭。跟“行不行”没关系。我见过三个月没装好Node.js的产品经理，后来一样带团队做上线。慢不怕，停才怕。

　　【雇主攻略学习·一品威客实战参考】

　　当你跑通第一个WebApp、开始想做点“真正能用”的东西时，你大概率会遇到一个问题：

　　自己的想法很好，但前端、后端、数据库、部署……一个人实在啃不完

　　这时候，一品威客是性价比极高的“外部技术合伙人”资源池。

　　任务大厅发布需求时，切忌只写“帮我做个WebApp”。有效写法是：

　　“已完成Vue3+Vite基础框架搭建，需要一个前端搭档完成：①用户登录注册页面(调后端接口);②商品卡片列表组件(适配移动端);③3天内交付可预览的HTML+CSS+JS代码。预算3000-5000元。参考界面：小红书商品页简化版。”