Web Frontend Logo Web 前端开发环境配置

Node.js、编辑器、框架工具完整配置指南

流程 安装流程

1

安装 Node.js

2

配置 npm 镜像

3

安装编辑器

4

安装开发工具

Node.js Node.js 环境

版本选择建议：推荐使用 LTS（长期支持）版本，生产环境更稳定
Node.js Node.js 官方

Node.js 官方网站下载

  • LTS 版本 - 长期支持，推荐
  • Current 版本 - 最新特性
  • 包含 npm 包管理器
官方下载
验证安装：
node -version
npm -version
nvm nvm (Node 版本管理)

Node Version Manager - 多版本管理工具

  • 自由切换 Node 版本
  • 项目版本隔离
  • 开发者必备工具
Windows 版 Linux/Mac 版
常用命令：
nvm install 20.10.0    # 安装指定版本
nvm use 20.10.0        # 使用指定版本
nvm list               # 查看已安装版本
npm npm 配置建议
1. 配置国内镜像（强烈推荐）
# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 查看当前镜像
npm config get registry
2. 全局包安装位置（避免 C 盘空间不足）
# 创建目录
mkdir D:\dev\nodejs\node_global
mkdir D:\dev\nodejs\node_cache

# 配置路径
npm config set prefix "D:\dev\nodejs\node_global"
npm config set cache "D:\dev\nodejs\node_cache"
注意：修改全局路径后，需要将新路径添加到系统环境变量 Path 中

编辑器 代码编辑器/IDE

VS Code Visual Studio Code（强烈推荐）
最流行 免费开源

微软出品的轻量级代码编辑器，前端开发首选

必备插件推荐：
  • Live Server - 实时预览
  • Prettier - 代码格式化
  • ESLint - 代码检查
  • Auto Rename Tag - 标签重命名
  • CSS Peek - CSS 快速查看
  • Path Intellisense - 路径智能提示
官方下载
提示：安装后按 Ctrl+Shift+X 打开插件面板，搜索上述插件名称安装
WebStorm WebStorm（专业选择）
功能最强 付费软件

JetBrains 出品的专业前端 IDE

特点：
  • 开箱即用，无需配置
  • 强大的代码智能提示
  • 内置调试和测试工具
  • 深度集成版本控制
官方下载 中文官网
学生可申请免费教育许可证，开源项目维护者可申请开源许可证
Sublime Sublime Text

轻量快速的文本编辑器

  • 启动速度极快
  • 多光标编辑强大
  • 丰富的插件生态
官方下载
HBuilderX HBuilderX

国产前端开发工具，Vue/uni-app 开发友好

  • 中文界面
  • 内置浏览器预览
  • uni-app 开发首选
官方下载

浏览器 浏览器开发工具

建议：至少安装 Chrome 和 Firefox 两款浏览器进行兼容性测试
Chrome
Google Chrome

市场份额最高，DevTools 强大

下载
Firefox
Mozilla Firefox

开发者友好，CSS 调试优秀

下载
Edge
Microsoft Edge

Chromium 内核，Windows 自带

下载
Chrome Chrome 开发者必备插件
ColorZilla

取色器工具

Page Ruler

页面尺寸测量

Responsive Viewer

响应式预览

JSON Viewer

JSON 格式化

Wappalyzer

技术栈识别

Lighthouse

性能分析（内置）

访问 Chrome 应用商店

框架 前端框架与工具

Vue Vue.js

渐进式 JavaScript 框架，易学易用

  • 中文文档友好
  • 生态系统完善
  • 适合中小型项目
中文文档 快速开始
React React

Facebook 开源的 UI 库

  • 组件化开发
  • 虚拟 DOM 高效
  • 就业市场需求大
中文文档 Vite 启动
Angular Angular

Google 维护的全能框架

  • 企业级框架
  • TypeScript 原生支持
  • 大型项目首选
中文文档 快速开始
Vite Vite

下一代前端构建工具

  • 极速冷启动
  • 热更新迅速
  • 多框架支持
中文文档 
npm create vite@latest
TypeScript TypeScript

JavaScript 的超集，添加类型系统

  • 类型安全
  • IDE 智能提示
  • 大型项目必备
中文文档 
npm install -g typescript
Tailwind Tailwind CSS

实用优先的 CSS 框架

  • 快速构建 UI
  • 无需写 CSS
  • 高度可定制
官方文档 
npm install -D tailwindcss

工具 其他实用工具

Git
Git

版本控制工具

下载
Git Bash
Git Bash

命令行工具

下载
TinyPNG
TinyPNG

图片压缩工具

官网
Coolors
Coolors

配色方案工具

官网
Google Fonts
Google Fonts

免费字体库

官网
CodePen
CodePen

在线代码演示

官网
Figma
Figma

UI 设计工具

官网
Postman
Postman

API 调试工具

官网

问题 常见问题与注意事项

配置国内镜像源可以大幅提升下载速度：

# 永久配置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 临时使用（单次有效）
npm install --registry https://registry.npmmirror.com

# 或者使用 cnpm（不推荐，可能有兼容性问题）
npm install -g cnpm --registry=https://registry.npmmirror.com

node-sass 由于网络和编译问题经常安装失败，建议：

  1. 使用 sass（Dart Sass）替代 node-sass
  2. 如果必须使用 node-sass，确保 Node 版本匹配
  3. 使用淘宝镜像：npm config set sass_binary_site https://npmmirror.com/mirrors/node-sass
# 卸载 node-sass，安装 sass
npm uninstall node-sass
npm install sass

框架 特点 适用场景
Vue 易学易用，中文友好 中小型项目、快速开发
React 灵活强大，生态丰富 中大型项目、就业需求
Angular 功能全面，学习曲线陡 企业级大型应用

初学者建议：从 Vue 开始入门，然后学习 React 拓展技能

必备插件：
  • Live Server - 实时预览
  • Prettier - Code formatter - 代码格式化
  • ESLint - 代码检查
  • Auto Rename Tag - 标签自动重命名
  • Path Intellisense - 路径智能提示
  • CSS Peek - CSS 快速查看
推荐设置：
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "files.autoSave": "afterDelay"
}

查看全局包安装位置：

npm config get prefix

默认位置通常在：C:\Users\用户名\AppData\Roaming\npm

如果命令无法运行，需要将该路径添加到系统环境变量 Path 中

验证 环境验证命令

安装完成后，打开命令提示符运行以下命令验证：

# 验证 Node.js
node -v

# 验证 npm
npm -v

# 验证 Git
git --version

# 查看 npm 配置
npm config list

# 验证 nvm（如果安装）
nvm version