Vue3 环境搭建全攻略 (新手必看)

一、安装 Node.js 和 npm

下载官网 nodejs.org 的 LTS 版本,安装时勾选"Add to PATH"
打开终端输入 node -vnpm -v 检查版本,Vue3 推荐 Node.js 18+

二、创建 Vue3 项目

npm create vue@latestyarn create vue 命令
选择默认配置 (推荐选"Manually select features"自定义)
注意:选 Vue Router 时要确认是否启用 TypeScript

三、启动开发服务器

进入项目文件夹后执行 npm run dev
默认监听 3000 端口,浏览器打开 http://localhost:3000
踩坑经验 1:npm 安装卡住时删掉 node_modules 再重装,别一直等

四、常见问题排查

报错"Cannot find module 'vue':检查是否安装了 @vue/compat 包
开发服务器无法启动:查端口占用用 lsof -i :3000,杀掉占用进程
样式不生效:确认是否正确导入 CSS 文件,检查浏览器开发者工具

五、开发工具建议

VSCode+Volar 插件组合,支持 Vue3 语法高亮和智能提示
安装 ESLint 规范代码,避免低级语法错误

六、小结

环境搭建是开发基础,遇到问题先查官方文档
实操中注意版本兼容性,避免 npm 缓存污染
养成及时清理 node_modules 的习惯,提升开发效率

发表评论