前端常用指令

前端开发常用工具指令手册

本文整理了前端开发中常用的工具指令，包括 Git、Node.js 版本管理、包管理、Nginx、Windows DOS、Docker 等，方便日常开发快速查阅。

---

目录

• 一、Git 常用指令
• 二、删除 node_modules
• 三、Node.js 版本管理
  • 3.1 nvm（Windows）
  • 3.2 Volta
• 四、Nginx 常用命令
• 五、Windows DOS 常用命令
• 六、前端包管理工具
• 七、Docker 常用命令
• 八、其他常用命令
• 九、参考资源

---

一、Git 常用指令

1.1 代码提交

# 从仓库拉取最新代码
git pull

# 查看本地文件添加前状态
git status

# 添加所有修改到暂存区
git add .

# 查看本地文件添加后状态
git status

# 提交注释
git commit -m "xxx"

# 推送到主仓库
git push -u origin master

# 强行推送到主仓库（慎用）
git push -f origin master

1.2 分支操作

# 克隆指定分支
git clone -b 分支名称 项目地址

# 查看所有本地分支
git branch -v

# 查看远程分支信息
git remote -v

# 拉取远程分支并创建本地分支，同时自动切换到该本地分支
git checkout -b 分支名称 origin/分支名称

# 创建本地开发分支
git branch 本地开发分支名

# 切换到本地开发分支
git checkout 本地开发分支名

# 提交代码到指定分支
git push -u origin 分支名称

1.3 合并代码

将主分支合并到分分支

git fetch origin
git checkout -b 分分支
git merge origin/主分支
git status
git add .
git commit -m '同步最新主分支代码'
git push -u origin 分分支名称

将分分支合并到主分支

git fetch origin
git checkout -b 主分支
git merge origin/分分支
git status
git add .
git commit -m '同步最新分分支代码'
git push -u origin 主分支

1.4 撤销操作

软撤销（不删除工作空间代码，撤销 commit，不撤销 git add）

git reset --soft HEAD~1

硬撤销（删除工作空间改动代码，撤销 commit 和 git add，慎用）

git reset --hard HEAD~1

混合撤销（不删除工作空间代码，撤销 commit，撤销 git add）

git reset --mixed HEAD~1

修改上次 commit 信息

git commit --amend

---

二、删除 node_modules

2.1 Windows 下使用 rmdir 删除

rmdir /s /q node_modules

2.2 使用 rimraf 插件删除

# 全局安装 rimraf
npm install rimraf -g

# 使用 rimraf 删除
rimraf node_modules

# 删除多个目录
rimraf node_modules dist

2.3 Linux / macOS 下使用 rm 删除

rm -rf node_modules

2.4 使用 npm 自带命令清理

# 清理 npm 缓存（可选）
npm cache clean --force

---

三、Node.js 版本管理

3.1 nvm（Windows）

使用管理员身份打开 CMD 运行。

查看已安装的所有 Node.js 版本

nvm ls

输出示例：

    14.18.1
  * 16.14.0 (Currently using 64-bit executable)

安装指定版本

nvm install 版本号

示例：

nvm install 16.14.0

切换到指定版本

nvm use 版本号

示例：

nvm use 16.14.0
node -v

卸载指定版本

nvm uninstall 版本号

示例：

nvm uninstall 16.14.0

常用 nvm 命令速查

命令	说明
nvm ls	查看已安装的 Node.js 版本
nvm ls available	查看可安装的 Node.js 版本
nvm install 版本号	安装指定版本
nvm use 版本号	切换到指定版本
nvm uninstall 版本号	卸载指定版本
nvm current	显示当前使用的版本
nvm alias default 版本号	设置默认版本

---

3.2 Volta

Volta 是一个用 Rust 编写的 JavaScript 工具链管理器，可以管理 Node.js 和包管理器版本。

安装 Volta

# macOS / Linux
curl https://get.volta.sh | bash

# Windows
# 下载安装包：https://volta.sh/
# 或使用 scoop
scoop install volta

# 或使用 chocolatey
choco install volta

安装 Node.js

# 安装最新 LTS 版本
volta install node

# 安装指定版本
volta install node@14.21.3

# 安装指定大版本
volta install node@18

安装包管理器

# 安装 pnpm
volta install pnpm@7.33.7

# 安装 yarn
volta install yarn@1.22.19

在项目中固定版本

# 固定 Node.js 版本
volta pin node@14.21.3

# 固定 pnpm 版本
volta pin pnpm@7.33.7

固定后 package.json 会自动添加：

{
  "volta": {
    "node": "14.21.3",
    "pnpm": "7.33.7"
  }
}

查看版本信息

volta list
volta list all
volta --version

Volta 常用命令速查

命令	说明
volta install node@版本号	安装并设置为默认版本
volta pin node@版本号	在项目中固定版本
volta list	查看当前项目的工具版本
volta list all	查看所有已安装的工具版本
volta uninstall node@版本号	卸载指定版本
volta --version	查看 Volta 版本

---

3.3 fnm（Node.js 版本管理器，跨平台）

# 安装 fnm
# macOS / Linux
curl -fsSL https://fnm.vercel.app/install | bash

# Windows (PowerShell)
winget install Schniz.fnm

# 查看已安装版本
fnm list

# 安装指定版本
fnm install 18

# 切换版本
fnm use 18

# 设置默认版本
fnm default 18

---

四、Nginx 常用命令

4.1 基本命令

# 启动（先 cd 到 Nginx 服务根路径下）
nginx

# 重启
nginx -s reload

# 停止
nginx -s stop

# 退出
nginx -s quit

# 测试配置文件是否正确
nginx -t

# 查看 Nginx 版本
nginx -v

4.2 常用反向代理配置示例

server {
    listen 80;
    server_name localhost;

    location /api/ {
        rewrite ^/api/(.*) /$1 break;
        proxy_pass http://localhost:8080;
    }

    location / {
        root D:/nginx-service/iot/guangxin-iot-web/html;
        try_files $uri $uri/ /index.html;
    }
}

---

五、Windows DOS 常用命令

5.1 目录操作

# 进入 D 盘
d:

# 进入文件夹
cd 文件夹名称

# 返回上一级目录
cd..

# 返回根目录
cd \

# 创建文件夹
md 文件夹名称
# 或
mkdir 文件夹名称

# 删除空文件夹
rd 文件夹名称
# 或
rmdir 文件夹名称

# 删除文件夹及其内容（/s 递归删除，/q 静默删除）
rd /s /q 文件夹名称

# 显示当前目录文件和子目录
dir

# 显示目录树结构
tree

5.2 文件操作

# 创建文本并写入内容（单行）
echo 文本内容 > 文件名.txt

# 创建文本并写入多行内容（Ctrl + Z 回车结束）
echo con > 文件名.txt

# 重命名文件
ren 原文件名 新文件名

# 移动文件
move 文件名 目标路径

# 复制文件
copy 文件名 目标路径

# 显示文本文件内容
type 文件名.txt

# 分页显示文本内容
type 文件名.txt | more

# 删除文件
del 文件名.txt

# 删除目录下所有 txt 文件
del *.txt

# 删除目录下所有文件（有提示）
del *.*

# 删除目录下所有文件（无提示）
del /s /q *.*

5.3 网络相关命令

# 查看 IP 配置
ipconfig

# 查看详细 IP 配置
ipconfig /all

# 刷新 DNS 缓存
ipconfig /flushdns

# 测试网络连通性
ping 域名或 IP

# 查看端口占用
netstat -ano

# 根据 PID 结束进程
taskkill /PID 进程号 /F

5.4 进程相关命令

# 查看所有进程
tasklist

# 根据进程名查找
tasklist | findstr 进程名

# 结束进程
taskkill /F /IM 进程名.exe

# 根据 PID 结束进程
taskkill /PID 1234 /F

---

六、前端包管理工具

6.1 npm 常用命令

# 安装所有依赖
npm install
# 或
npm i

# 安装指定依赖
npm install 包名

# 安装指定版本
npm install 包名@版本号

# 安装开发依赖
npm install 包名 --save-dev
# 或
npm install 包名 -D

# 安装全局依赖
npm install 包名 -g

# 卸载依赖
npm uninstall 包名

# 更新依赖
npm update 包名

# 清理缓存
npm cache clean --force

# 查看全局安装包
npm list -g --depth=0

# 查看镜像源
npm config get registry

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

# 恢复官方镜像
npm config set registry https://registry.npmjs.org

6.2 pnpm 常用命令

# 安装所有依赖
pnpm install

# 安装指定依赖
pnpm add 包名

# 安装开发依赖
pnpm add -D 包名

# 安装全局依赖
pnpm add -g 包名

# 卸载依赖
pnpm remove 包名

# 更新依赖
pnpm update 包名

# 运行脚本
pnpm run dev
pnpm run build

# 查看镜像源
pnpm config get registry

# 设置淘宝镜像
pnpm config set registry https://registry.npmmirror.com

6.3 yarn 常用命令

# 安装所有依赖
yarn install

# 安装指定依赖
yarn add 包名

# 安装开发依赖
yarn add 包名 -D

# 安装全局依赖
yarn global add 包名

# 卸载依赖
yarn remove 包名

# 更新依赖
yarn upgrade 包名

# 运行脚本
yarn dev
yarn build

---

七、Docker 常用命令

7.1 镜像操作

# 搜索镜像
docker search 镜像名

# 拉取镜像
docker pull 镜像名
# 示例：拉取 Nginx 镜像
docker pull nginx

# 查看本地镜像列表
docker images

# 删除镜像
docker rmi 镜像ID
# 或
docker rmi 镜像名:标签

# 强制删除镜像
docker rmi -f 镜像ID

# 清理悬空镜像
docker image prune

7.2 容器操作

# 查看运行中的容器
docker ps

# 查看所有容器（包括停止的）
docker ps -a

# 启动容器
docker start 容器ID

# 停止容器
docker stop 容器ID

# 重启容器
docker restart 容器ID

# 删除容器
docker rm 容器ID

# 强制删除运行中的容器
docker rm -f 容器ID

# 查看容器日志
docker logs 容器ID

# 实时查看容器日志
docker logs -f 容器ID

# 进入容器内部
docker exec -it 容器ID /bin/bash
# 或
docker exec -it 容器ID sh

7.3 运行容器

# 后台运行容器，映射端口
docker run -d -p 80:80 --name my-nginx nginx

# 参数说明
# -d：后台运行
# -p 80:80：主机端口:容器端口
# --name：指定容器名称
# -v：挂载目录
# -e：设置环境变量
# --restart=always：开机自启

# 运行前端项目容器示例
docker run -d -p 8080:80 --name my-app -v /d/project:/usr/share/nginx/html nginx

7.4 Docker Compose 常用命令

# 启动所有服务（后台运行）
docker-compose up -d

# 停止所有服务
docker-compose down

# 查看服务状态
docker-compose ps

# 查看服务日志
docker-compose logs

# 实时查看日志
docker-compose logs -f

# 重新构建并启动
docker-compose up -d --build

# 重启服务
docker-compose restart

7.5 前端项目 Dockerfile 示例

# 第一阶段：构建
FROM node:14.21.3 AS builder

WORKDIR /app

COPY package.json ./
COPY pnpm-lock.yaml ./

RUN npm install -g pnpm@7.33.7
RUN pnpm install

COPY . .

RUN pnpm run build

# 第二阶段：运行
FROM nginx:alpine

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

7.6 Docker 常用命令速查

命令	说明
docker images	查看镜像列表
docker pull 镜像名	拉取镜像
docker rmi 镜像ID	删除镜像
docker ps	查看运行中的容器
docker ps -a	查看所有容器
docker run -d -p 80:80 nginx	后台运行容器并映射端口
docker start 容器ID	启动容器
docker stop 容器ID	停止容器
docker rm 容器ID	删除容器
docker logs 容器ID	查看容器日志
docker exec -it 容器ID /bin/bash	进入容器
docker-compose up -d	启动 Docker Compose 服务
docker-compose down	停止 Docker Compose 服务
docker-compose logs -f	实时查看服务日志

---

八、其他常用命令

8.1 查看端口占用并结束进程（Windows）

# 查看 8080 端口占用
netstat -ano | findstr 8080

# 根据 PID 结束进程
taskkill /PID 进程号 /F

8.2 查看磁盘使用情况

# Windows
wmic logicaldisk get size,freespace,caption

# 查看磁盘空间
fsutil volume diskfree 盘符:

8.3 压缩解压

# Windows PowerShell 压缩
tar -czvf 压缩包名.tar.gz 要压缩的文件或目录

# Windows PowerShell 解压
tar -xzvf 压缩包名.tar.gz

8.4 前端项目构建命令

# Vue 项目
npm run serve
npm run build

# React 项目
npm run start
npm run build

# Vite 项目
npm run dev
npm run build
npm run preview

---

九、参考资源

• Git 官方文档
• Volta 官网
• nvm-windows GitHub
• Node.js 官网
• Nginx 官方文档
• npm 官方文档
• pnpm 官方文档
• yarn 官方文档
• Docker 官方文档

---

提示：本文档持续更新，如有遗漏或错误欢迎指正。