2024前端开发 - 基础概念02 - 前端开发常见命令和环境安装配置

学习系列目录

• 2024前端开发 - 1/3入门篇 - 基础概念学习
  • 2024入门篇 - 基础概念01 - 一条命令的执行过程和PATH的配置
  • 2024入门篇 - 基础概念02 - 前端开发常见命令和环境安装配置
• 2024前端开发 - 2/3进阶篇 - 核心框架学习
• 2024前端开发 - 3/3进阶篇 - 重点专题学习
  • 2024前端开发 - 重点专题01 - Astro框架介绍

热门话题系列

• 2023年全球Web开发概况
• 2024年的七大前端Web开发趋势

热门模版系列

• AstroPaper博客
• AdminOne后台
• 工程师个人简历

---

你是否刚踏入前端开发的世界，对于如何使用工具感到手足无措？或者你是否正在寻找一个详细、实操性强的指南来帮助你上手前端开发？那么，你来对了地方。本文将详细介绍如何在 Windows 和 Mac 操作系统上安装和使用 Git Bash，NPM，Yarn 等工具，并通过命令行来操作文件和文件夹。

命令行工具的历史

命令行工具是与计算机交互的一种方式，其历史可以追溯到早期的计算机系统。这里有一篇详细的文章，可以帮助你了解Windows和Linux系统中命令行工具的历史和发展。

安装Git Bash，NPM，Yarn等工具

工具	Windows安装命令	Mac安装命令
Git	下载安装程序，然后按照引导完成安装。	在终端输入以下命令：brew install git
NPM	下载安装Node.js和NPM，NPM会随Node.js一起安装。	在终端输入以下命令：brew install node
Yarn	在已安装Node.js和NPM的情况下，打开命令行工具并输入：npm install -g yarn	在终端输入以下命令：brew install yarn

需要注意，Mac系统需要先安装Homebrew，才能使用brew命令。

通过命令行工具操作文件夹

操作	Windows命令	Mac命令
创建文件夹	mkdir "new folder"	mkdir "new folder"
进入文件夹	cd "new folder"	cd "new folder"
列出文件夹内容	dir	ls

查看更多文件夹相关命令的链接：Windows，Mac

通过命令行工具操作文件

操作	Windows命令	Mac命令
创建文件	echo. > new_file.txt	touch new_file.txt
删除文件	del new_file.txt	rm new_file.txt
编辑文件	notepad new_file.txt	nano new_file.txt

查看更多文件操作相关命令的链接：Windows，Mac

其他常见命令

命令	用途	示例	备注
npm	Node Package Manager，用于安装和管理Node.js包	npm install package_name	使用npm --help可以查看所有可用的npm命令
yarn	Yarn是Facebook开发的一款JavaScript包管理器，用于管理项目的依赖关系	yarn add package_name	Yarn与npm类似，但在性能和安全性上优于npm
git	Git是一个分布式版本控制系统，用于追踪文件的更改	git clone repository_url	使用git --help可以查看所有可用的git命令
npx	npx是一个npm包运行器，它可以运行本地安装的npm包	npx create-react-app my-app	npx在npm v5.2.0及以后的版本中包含
ng	Angular CLI命令行工具，用于创建和管理Angular应用	ng new my-app	使用ng --help可以查看所有可用的ng命令
vue	Vue CLI命令行工具，用于创建和管理Vue.js应用	vue create my-app	使用vue --help可以查看所有可用的vue命令
react-native	React Native CLI命令行工具，用于创建和管理React Native应用	react-native init my-app	使用react-native --help可以查看所有可用的react-native命令
gatsby	Gatsby CLI命令行工具，用于创建和管理Gatsby应用	gatsby new my-app	使用gatsby --help可以查看所有可用的gatsby命令

以上命令都是前端开发中常用的命令，这些命令可以帮助你安装和管理项目的依赖关系，创建和管理你的前端应用，以及追踪你的文件更改。

重要提示

• 了解你正在执行的命令：在执行任何命令之前，确保你了解它将对你的系统产生什么影响。如果你不确定，搜索它或查阅相关文档。
• 定期更新你的工具：保持你的开发环境最新，可以享受最新的功能和安全性更新。