前端开发常用命令行工具及操作命令(Node.js 和 npm、Yarn、vue、React、Git、Webpack)

在前端开发中,掌握常用的命令行工具和命令可以大大提高开发效率。接下来将介绍一些常用的前端命令行工具和命令,涵盖从项目初始化到构建和部署的各个环节。

1. Node.js 和 npm

安装 Node.js 和 npm

首先,需要安装 Node.js。安装 Node.js 时会同时安装 npm(Node 包管理器)。

常用 npm 命令

复制代码
# 查看 Node.js 版本
node -v

# 查看 npm 版本
npm -v

# 初始化一个新的 Node.js 项目
npm init -y

# 安装依赖包
npm install <package-name>

# 全局安装依赖包
npm install -g <package-name>

# 卸载依赖包
npm uninstall <package-name>

# 更新依赖包
npm update <package-name>

# 运行自定义脚本
npm run <script-name>

2. Yarn

Yarn 是一个替代 npm 的包管理工具,具有更快、更可靠的特点。

安装 Yarn

复制代码
# 使用 npm 安装 Yarn
npm install -g yarn

常用 Yarn 命令

复制代码
# 查看 Yarn 版本
yarn -v

# 初始化一个新的 Yarn 项目
yarn init -y

# 安装依赖包
yarn add <package-name>

# 全局安装依赖包
yarn global add <package-name>

# 卸载依赖包
yarn remove <package-name>

# 更新依赖包
yarn upgrade <package-name>

# 运行自定义脚本
yarn run <script-name>

3. Vue CLI

Vue CLI 是 Vue.js 官方提供的命令行工具,用于快速搭建 Vue.js 项目。

安装 Vue CLI

复制代码
# 全局安装 Vue CLI
npm install -g @vue/cli

常用 Vue CLI 命令

复制代码
# 查看 Vue CLI 版本
vue --version

# 创建一个新的 Vue 项目
vue create <project-name>

# 启动开发服务器
npm run serve

# 构建项目
npm run build

# 运行单元测试
npm run test:unit

# 运行端到端测试
npm run test:e2e

# 运行 Linter
npm run lint

4. Create React App

Create React App 是 React 官方提供的命令行工具,用于快速搭建 React 项目。

安装 Create React App

复制代码
# 全局安装 Create React App
npm install -g create-react-app

常用 Create React App 命令

复制代码
# 查看 Create React App 版本
create-react-app --version

# 创建一个新的 React 项目
create-react-app <project-name>

# 启动开发服务器
npm start

# 构建项目
npm run build

# 运行测试
npm test

# 运行 Linter
npm run lint

5. Git

Git 是最常用的版本控制工具。

安装 Git

请参阅 Git 官方文档 获取安装指导。

常用 Git 命令

复制代码
# 初始化 Git 仓库
git init

# 克隆仓库
git clone <repository-url>

# 添加文件到暂存区
git add <file-name>

# 提交更改
git commit -m "Commit message"

# 查看状态
git status

# 查看日志
git log

# 切换分支
git checkout <branch-name>

# 创建分支
git checkout -b <branch-name>

# 合并分支
git merge <branch-name>

# 推送到远程仓库
git push origin <branch-name>

# 拉取远程仓库
git pull origin <branch-name>

6. Webpack

Webpack 是一个模块打包工具,通常用于现代 JavaScript 应用的资源打包。

安装 Webpack

复制代码
# 安装 Webpack 和 Webpack CLI
npm install --save-dev webpack webpack-cli

常用 Webpack 命令

复制代码
# 查看 Webpack 版本
npx webpack --version

# 使用默认配置打包项目
npx webpack

# 使用指定配置文件打包项目
npx webpack --config webpack.config.js

掌握这些常用的前端命令行工具和命令,可以大大提高开发效率。在实际项目中,可以根据需要选择和使用合适的工具和命令,希望这篇文章对你有所帮助!

请记得一键三连(点赞、收藏、分享)哦!

相关推荐
用户2141183263602几秒前
dify案例分享-魔搭+Dify王炸组合!10分钟搭建你的专属 生活小助理
前端
工呈士1 分钟前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
WEI_Gaot4 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian7 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户2031196600968 分钟前
sheet的基本用法
前端
火星思想14 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
杨进军17 分钟前
MutationObserver 实现 iframe 自适应高度
前端
火星思想18 分钟前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话19 分钟前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
Paramita19 分钟前
Koa源码解读
前端