React/Vue 框架到底是什么里我们写完计数器组件，是靠 npm run dev 把它跑起来、靠 npm run build 打包上线的，中间还提到了构建工具 Vite。
但这些命令到底在干什么？package.json 是个啥？为什么前端项目动不动就有一个几百 MB 的 node_modules 文件夹？
下面就是上一篇讲解的计数器项目，点右上角的下载按钮，可以把完整代码下载下来：
下载下来是一个 zip 压缩包，解压后就是一个标准的前端项目，我们本地把它跑起来，就能搞清楚前端开发中的主要步骤，以及相关的专业术语了。
首先需要确保你的本机装好 Node.js（npm 会随 Node.js 一起装上），进入解压后的项目目录，依次执行这两条命令：
npm install # 安装依赖
npm run dev # 启动开发服务器执行完 npm run dev，终端会打印出一个本地访问地址：
VITE v6.4.3 ready in 391 ms
➜ Local: http://localhost:5173/浏览器打开 http://localhost:5173，就能看到和网页里一模一样的计数器，这个项目就在你本地跑起来了。
再试另一条常用命令 npm run build：
$ npm run build
vite v6.4.3 building for production...
✓ 29 modules transformed.
dist/index.html 0.21 kB │ gzip: 0.18 kB
dist/assets/index-Dweo0F-0.js 195.22 kB │ gzip: 61.15 kB
✓ built in 326ms跑完之后项目目录里多了一个 dist 文件夹，里面就是编译打包好的静态文件（HTML + JS + CSS 文件）。
这两条命令对应开发和上线两个阶段：
npm run dev 是开发时用的。它在本地启动一个服务器，不产出任何编译文件，代码实时编译、实时预览。
最方便的一点是热更新：你改了代码一保存，浏览器页面立刻自动刷新，不用重启服务器。所以开发阶段基本就是开着 dev 服务器，边改边看效果。
npm run build 是要上线时用的。它把源代码一次性编译、打包、压缩，产出最终的静态文件。
你看 dist 里其实就是一个 HTML 加一个 JS，这就是用户浏览器实际加载的东西。把这些文件放到服务器上，用户浏览器会自动加载这些文件，就能看到你的网页内容了。
项目目录里大概是这些文件：
counter/
├── index.html # 页面入口
├── index.jsx # 应用入口
├── App.jsx # 根组件
├── Counter.jsx # 计数器组件（我们写的）
├── package.json # 项目清单
├── package-lock.json # 依赖版本锁定
├── vite.config.js # 构建工具配置
├── node_modules/ # 装完依赖才会出现
└── dist/ # 打包后才会出现那几个 .jsx 文件是计数器组件的核心代码，index.html 是页面入口，之前都介绍过，本文介绍剩下的其他文件。