昨天折腾Vue差点把我整懵了，幸好有人安利了官方工具。今儿就把这趟折腾史原原本本记下来，新手看完少走八里地弯路。

第一脚油门：装脚手架

以前写项目跟搬家似的，html/css/js全塞一个破纸箱里。这回直接打开命令行，敲上npm create vue@latest。好家伙，跳出来个问卷跟查户口似的：

• 项目名？填"菜狗练习"
• 用TypeScript？直接选No（新手搞这玩意纯找虐）
• 要不要JSX？脑袋摇成拨浪鼓

回车一敲，脚手架吭哧吭哧自动搭台子。文件夹唰唰冒出来，比我手动新建快十倍。

救命的热更新

以前改代码像在赌命。改个按钮颜色就得手动刷新页面，F5快被我按出火星子了。这回在项目文件夹敲npm run dev，浏览器自己弹开个localhost:5173。试着在代码里把“提交按钮”改成“大爷来点我”，文件刚保存——嚯！网页字儿自己变了！跟变魔术似的，我叼着的饼干差点掉键盘上。

浏览器查错真带劲儿

写个@click事件死活不触发，以前只能满世界*。现在装了Vue开发者工具插件，打开浏览器检查器，多出个Vue标签页。组件树跟剥洋葱似的层层展开，点中按钮直接看它绑的事件函数，参数值清清楚楚。比掏耳朵还解痒！

深夜遇到的鬼打墙

昨晚写购物车功能差点砸电脑。组件之间传值传得我头晕眼花，父组件里data:{ count:0 }，子组件里props死活接不到。气到薅头发时突然想起工具里的时间旅行功能——点一下状态快照，数据流动像慢动作回放。发现是子组件拼错了props名，把goodsCount写成godCount（这破键盘该换了）。

插件救我狗命

最香的是那些自动挑错的小助手。在VS Code里装了个Vue插件，写<templete>错字直接标红波浪线（没错我把template拼漏了p）。保存时自动格式化，缩进比军训列队还整齐。要是没这玩意，我代码怕是要写成意大利面条。

搞完这些再看同事用jQuery手搓项目，感觉像看他在用竹片刮胡子。工具省下的时间够我每晚多刷两集剧，真香！