用 npm init -y 初始化项目最稳妥，它在VS Code内置终端中执行可控性强，避免手动创建package.json出错，且需配好scripts并安装依赖才能运行。
用 npm init 初始化项目最稳妥
VS Code 本身不提供“新建前端项目”按钮，它只是编辑器；真正创建项目得靠命令行工具。直接在 VS Code 内置终端里跑 npm init 是最通用、最可控的方式。
常见错误现象：npm init 报错 “command not found”，说明 Node.js 没装或没加进系统 PATH；或者执行后卡在交互提问环节，其实是默认用了 npm init -y 的简化版，但你没注意到提示跳过了。
- 先确认
node -v和npm -v都能正常输出版本号 - 在空文件夹里打开 VS Code，再打开内置终端（
Ctrl+`），直接输npm init -y，跳过所有提问，生成基础package.json - 别用图形界面右键“新建文件夹→改名→手动写
package.json”，容易格式出错或缺必要字段（比如type: "module"漏了会影响 ES 模块导入）
配好 scripts 才算真正可运行
初始化完只是骨架，没 scripts 就没法一键启动开发服务器或构建。很多新手以为装了 create-react-app 或 vite 就万事大吉，其实关键在 package.json 里的 scripts 字段是否指向正确命令。
使用场景：你刚用 npm create vite@latest 创建完项目，但双击 index.html 打不开 React 组件——因为没走开发服务器，ES 模块路径解析失败。
立即学习“前端免费学习笔记（深入）”；
- 检查
package.json中是否有类似"dev": "vite"或"start": "react-scripts start"这样的脚本 - 确保对应依赖已安装：
npm install（不是npm i，虽然等价，但初学者容易漏掉这步） - 运行前先
cd到项目根目录，再执行npm run dev，否则会报ERR! Missing script: "dev"
vite 比 create-react-app 更适合新手起步
不是因为技术先进，而是因为它没隐藏配置、报错更直白、启动更快，对刚接触前端构建的新手更友好。而 create-react-app 把 Webpack 封得太死，出错时堆栈里全是内部路径，根本看不出哪行代码惹的祸。
参数差异：npx create-react-app my-app 默认带 Jest + ESLint + 测试模板，但你可能根本不用测试；npm create vite@latest my-app -- --template react 只给最简结构，后续要啥加啥。
- 执行
npm create vite@latest后，会问你框架和变体，选react+javascript即可 - 生成的
vite.config.js是纯 JS 文件，改端口、开代理、加别名，直接写对象属性就行，不用学 Webpack loader 规则 - 注意：Vite 默认不支持
.jsx文件热更新（除非显式配置esbuild.jsxInject），如果用了 JSX 语法但文件后缀是.js，浏览器控制台会报Unexpected token '
别急着装全局 CLI 工具
看到教程里写 npm install -g create-react-app 就跟着敲？小心污染全局环境。不同项目可能依赖不同版本的 CLI，全局装一个，后面跑老项目时 npm start 直接崩。
性能 / 兼容性影响：全局 create-react-app 版本 > 5.0 后默认用 Webpack 5，但有些旧项目依赖 Webpack 4 插件，一跑就报 Module not found: Error: Can't resolve 'fs'。
- 一律用
npx create-react-app my-app或npm create vite@latest，让 npm 临时下载对应版本，用完即删 - VS Code 里按
Ctrl+Shift+P输入 “Shell Command: Install ‘code’ command in PATH”，确保终端能识别code .，不然每次还得手动拖文件夹进窗口 - 初始化完立刻关掉其他 VS Code 窗口，避免多个工作区同时监听同一
node_modules导致热重载冲突
真正麻烦的从来不是“怎么建项目”，而是建完之后发现 import 路径不对、fetch 被 CORS 拦住、或者 console.log 输出了却在浏览器里看不到——这些都得回退到项目结构和脚本配置里一层层查。
