内容摘要：WebStorm 装 Vue 项目，说穿了就两条路：命令行创建，或者 IDE 里点几下。但大多数人第一次打开这软件，对着满屏英文菜单就慌了——其实真没必要。 我最初用 WebStorm 搭 Vue 3

WebStorm 装 Vue 项目，项目说穿了就两条路：命令行创建，项目或者 IDE 里点几下。项目但大多数人第一次打开这软件，项目对着满屏英文菜单就慌了——其实真没必要。项目

我最初用 WebStorm 搭 Vue 3 项目时，项目卡在 Node 版本上整整半小时。项目后来发现，项目装项目前先检查环境，项目比啥都重要。项目你按下 Ctrl+Alt+S 打开设置，项目搜 "Node.js"，项目把解释器路径指到你本机 node 安装位置。项目这一步没做对，项目后面所有命令都会报错，项目而且报错信息长得一模一样，根本看不出问题在哪。

环境就绪后，直接开干。WebStorm 顶部菜单栏有个 File → New → Project，弹出的窗口左侧选 Vue.js，右边选构建工具。这里有个坑：默认的 Vite 版本要求 Node 18+，你要是还在用 16，老老实实切回 Vue CLI，否则 npm install 能跑，启动就崩。

项目名别带大写字母，也别用中文。我见过同事起名 "MyProject"，结果路由死活匹配不上，查了半天是大小写敏感问题。老老实实用 kebab-case，比如 my-vue-app，省心。

点完 Create 后，WebStorm 会自动跑 npm install。这时候你去看右下角进度条，别急着写代码。装依赖期间，顺手把 Prettier 插件装上，再在设置里搜 "Format on Save"，勾上。这步能救你以后每一行代码的命——团队协作时，格式统一问题少一半。

等依赖装完，打开 package.json，看 scripts 部分。默认有 dev、build、serve 三个命令。双击 dev 那一行，WebStorm 会帮你开个终端跑起来。浏览器自动弹出 localhost:5173，看到 Vue 标志性 logo 就算成了。

但这里有个细节：WebStorm 自带的终端和系统终端不完全一样。你要是遇到 PATH 找不到 npm 的情况，别慌，去设置里搜 "Terminal"，把 shell path 改成你系统默认的 bash 或 zsh 完整路径。Windows 用户尤其容易踩这个坑，因为 WebStorm 默认用的 PowerShell 可能和你装 Node 时配置的环境变量对不上。

项目跑起来后，你会看到一堆自动生成的文件。别被吓到，真正要动的就三个：src/App.vue、src/main.js、src/router/index.js（如果选了路由）。其他全是脚手架配置，暂时不用碰。我第一次看到 node_modules 里几千个文件差点以为中毒了，后来才知道那是正常的。

最后说个实用技巧：WebStorm 右上角有个下拉菜单，可以选 "Edit Configurations"。点开，加一个 npm 配置，command 选 run，script 选 dev。这样你以后点绿色三角按钮就能启动项目，不用每次敲命令。这功能藏得深，但用熟了效率翻倍。

搭完基础框架后，你会发现 WebStorm 对 Vue 单文件组件的支持确实比 VS Code 顺滑——模板里写 <router-link> 自动补全，样式 scoped 提示也醒目。但工具终究是工具，跑通流程才是第一步。剩下的组件怎么写、状态怎么管，那是另一码事。