返回

MacBook Pro M1 搭建前端开发环境

前端

前言

随着前端开发技术的不断发展，前端开发人员需要掌握越来越多的工具和技能才能满足项目开发的需求。本文将详细介绍如何在 MacBook Pro M1 上搭建一个完整的现代前端开发环境，包括必要的工具、软件和配置。

工具和软件准备

在开始搭建前端开发环境之前，我们需要先准备一些必要的工具和软件。

1. 操作系统

  • macOS Catalina 10.15 或更高版本

2. 代码编辑器

  • Visual Studio Code
  • Atom
  • Sublime Text
  • JetBrains PhpStorm
  • IntelliJ IDEA
  • PyCharm

3. 终端模拟器

  • Terminal
  • iTerm2

4. 版本控制工具

  • Git

5. 软件包管理器

  • Homebrew
  • nvm

6. Node.js 和 npm

  • Node.js 16.x 或更高版本
  • npm 8.x 或更高版本

7. 前端框架

  • React
  • Vue
  • Angular

8. CSS 预处理器

  • Sass
  • Less
  • Stylus

9. JavaScript 编译器

  • Babel

10. 打包工具

  • Webpack
  • Gulp
  • Grunt

11. Docker

12. Vagrant

13. VirtualBox

环境搭建步骤

1. 安装 Xcode

Xcode 是苹果公司开发的集成开发环境，用于开发 macOS 和 iOS 应用程序。它可以从 App Store 免费下载。

2. 安装 Homebrew

Homebrew 是一个 macOS 上的软件包管理器，可以方便地安装和管理各种软件包。安装 Homebrew 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  1. 按下回车键，按照提示输入密码并继续安装。

3. 安装 nvm

nvm 是一个用于管理多个 Node.js 版本的软件包管理器。安装 nvm 的步骤如下：

  1. 复制并粘贴以下命令：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  1. 按下回车键，按照提示继续安装。

4. 安装 Node.js 和 npm

安装 Node.js 和 npm 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
nvm install node
  1. 按下回车键，等待安装完成。

5. 安装前端框架

接下来，我们可以根据自己的需求安装前端框架。常用的前端框架包括 React、Vue 和 Angular。

React

安装 React 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g create-react-app
  1. 按下回车键，等待安装完成。

Vue

安装 Vue 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g @vue/cli
  1. 按下回车键，等待安装完成。

Angular

安装 Angular 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g @angular/cli
  1. 按下回车键，等待安装完成。

6. 安装 CSS 预处理器

接下来，我们可以根据自己的需求安装 CSS 预处理器。常用的 CSS 预处理器包括 Sass、Less 和 Stylus。

Sass

安装 Sass 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g sass
  1. 按下回车键，等待安装完成。

Less

安装 Less 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g less
  1. 按下回车键，等待安装完成。

Stylus

安装 Stylus 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g stylus
  1. 按下回车键，等待安装完成。

7. 安装 JavaScript 编译器

接下来，我们可以根据自己的需求安装 JavaScript 编译器。常用的 JavaScript 编译器包括 Babel。

Babel

安装 Babel 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g babel-cli
  1. 按下回车键，等待安装完成。

8. 安装打包工具

接下来，我们可以根据自己的需求安装打包工具。常用的打包工具包括 Webpack、Gulp 和 Grunt。

Webpack

安装 Webpack 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g webpack
  1. 按下回车键，等待安装完成。

Gulp

安装 Gulp 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g gulp
  1. 按下回车键，等待安装完成。

Grunt

安装 Grunt 的步骤如下：

  1. 打开终端，复制并粘贴以下命令：
npm install -g grunt-cli
  1. 按下回车键，等待安装完成。

9. 安装 Docker

Docker 是一个轻量级的虚拟化平台，可以方便地创建、运行和管理容器。安装 Docker 的步骤如下：

  1. 打开 Docker 官网（https://www.docker.com/），下载并安装 Docker Desktop。

  2. 安装完成后，打开 Docker Desktop，按照提示进行配置。

10. 安装 Vagrant

Vagrant 是一个轻量级的虚拟化管理工具，可以方便地创建和管理虚拟机。安装 Vagrant 的步骤如下：

  1. 打开 Vagrant 官网（https://www.vagrantup.com/），下载并安装 Vagrant。

  2. 安装完成后，打开 Vagrant，按照提示进行配置。

11. 安装 VirtualBox

VirtualBox 是一个开源的虚拟化软件，可以方便地创建和管理虚拟机。安装 VirtualBox 的步骤如下：

  1. 打开 VirtualBox 官网（https://www.virtualbox.org/），下载并安装 VirtualBox。

  2. 安装完成后，打开 VirtualBox，按照提示进行配置。

配置环境变量

在完成上述步骤后，我们需要配置环境变量。环境变量是系统中存储的变量，可以在命令行中使用。

1. 配置 PATH 变量

我们需要将 Homebrew、nvm、Node.js、npm、Yarn、Git、Docker、Vagrant 和 VirtualBox 的可执行文件路径添加到 PATH 变量中。具体步骤如下：

  1. 打开终端，复制并粘贴以下命令：
export PATH="/opt/homebrew/bin:$PATH"
export PATH="$HOME/.nvm/versions/node/$(nvm version)/bin:$PATH"
export PATH="/usr/local/bin:$PATH"
export PATH="/usr/bin:$PATH"
  1. 按下回车键，使配置生效。

2. 配置 NVM_DIR 变量

我们需要将 nvm 的安装目录路径添加到 NVM_DIR 变量中。具体步骤如下：

  1. 打开终端，复制并粘贴以下命令：
export NVM_DIR="$HOME/.nvm"
  1. 按下回车键，使配置生效。

总结

以上就是如何在 MacBook Pro M1 上搭建一个完整的现代前端开发环境的详细步骤。希望本文能够帮助您快速搭建好开发环境，并开始您的前端开发之旅。