📝 作者：一名 Vue 的学习者
🕒 记录时间：2025年11月
💡 目标：搭建一套稳定、高效、适合初学者的本地 Vue 开发环境
一、为什么需要这套环境？
在开始 Vue 项目开发前，我们需要一个完整的“工具链”：
- Node.js：提供 JavaScript 运行时环境，支持使用 npm 管理依赖。
- npm（Node Package Manager）：用于安装 Vue CLI、项目依赖等。
- WebStorm：强大的 JavaScript IDE，提供智能提示、调试、Git 集成等功能，提升开发效率。
这套组合对新手友好，同时具备专业级开发能力。
二、安装步骤详解
1. 安装 Node.js（含 npm）
- 访问官网：nodejs.org，选择合适的版本
- 下载 v24.11.1（LTS） 版本（长期支持版，更稳定）
- 按默认选项安装（会自动包含 npm）
- 验证安装是否成功：
node -v # 查看 Node.js 版本，如 v24.11.1
npm -v # 查看 npm 版本，如 11.6.2
✅ 建议：不要使用最新版（Current），LTS 更适合学习和生产。
2. 配置 npm 镜像（可选但推荐）
国内访问官方 npm 源较慢，建议切换为淘宝镜像（npmmirror）：
# 临时使用
npm install --registry https://registry.npmmirror.com
# 或永久设置
npm config set registry https://registry.npmmirror.com
# 验证配置
npm config get registry
# 应返回：https://registry.npmmirror.com/
3. 安装并配置 WebStorm
- 下载 WebStorm，选择最新版即可：www.jetbrains.com/webstorm/
- 安装后首次启动，需要注册jetbrains账号登录，选择 “Do not import settings”
- 推荐配置：
-
- 启用 Vue.js 插件（通常已内置）
- 设置 File → Settings → Languages & Frameworks → JavaScript → 选择 Vue.js
- 在 Settings → Tools → Terminal 中确保 Shell 路径正确（如 Windows 用 PowerShell 或 Git Bash）
💡 小技巧：WebStorm 会自动识别 package.json，并提示你运行 npm install。
三、创建第一个 Vue 项目
在cmd终端中执行 npm create vue@latest my-vue-app：
# 使用官方交互脚手架创建（选择 JavaScript）
npm create vue@latest my-vue-app
执行后会有交互选项，按下面选择（或等价）：
- Project name:
my-vue-app（或你想要的名字） - Add TypeScript? => No（选择 No 用 JS）
- Add JSX? => No
- Add Vue Router? => Yes
- Add Pinia? => No（我们不需要状态管理）
- Add Vitest? => No
- Add ESLint? => No
四、在 WebStorm 中打开项目
- 启动 WebStorm
- 选择 Open or Import
- 导航到
my-vue-app文件夹 - 等待 WebStorm 自动索引和安装 TypeScript/Vue 类型定义（首次可能稍慢）
- 打开
WebStorm****-》Terminal****进入项目安装依赖并启动开发服务器：
npm install
npm run dev
浏览器访问 http://localhost:5173，看到 Vue 欢迎页面即表示成功！
- 如果不想使用命令行启动，还可以直接在IDE配置npm启动命令，后续直接debug启动。
此时你将获得：
.vue文件语法高亮- 组件智能提示
- 实时错误检查
- 内置终端（可直接运行
npm run dev）
五、总结
通过本次搭建，我成功配置了一套：
- 基于
Node.js + npm的包管理环境 - 使用
npm create vue@latest my-vue-app快速生成项目 - 在
WebStorm中实现高效开发与调试
这套环境兼顾了易用性与扩展性，为后续学习 Vue 组件、路由、状态管理打下坚实基础。
🌱 下一步计划：学习 my-vue-app 项目结构 及 单文件组件结构。
