Mac M1/M2/M3 芯片環境配置以及常用軟件安裝-前端

在開始之前,請確保您的 Mac 是最新版本的 macOS,因爲某些應用程序可能需要特定的操作系統版本才能正常運行。對於本指南,我們將假設您使用的是 macOS Big Sur(或更高版本)。

設置開發環境

1. Xcode Command Line Tools 的安裝

首先,我們需要安裝 Xcode Command Line Tools。這包含了 GCC 和一些有用的命令行工具,它們對於許多開源項目來說是必需的。要安裝它,打開終端並輸入以下命令:

xcode-select --install

這將彈出一個對話框詢問是否要下載 Xcode Command Line Tools。點擊“安裝”進行安裝。

2. Homebrew 的安裝

Homebrew 是一種流行的包管理器,可以幫助我們輕鬆地安裝和管理各種開源軟件。如果您還沒有安裝 Homebrew,可以使用以下命令來安裝它:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

安裝完成後,您可以更新 brew 的索引以獲取最新的軟件列表:

brew update

3. Node.js / npm 的安裝

Node.js 是現代 Web 開發的基石之一,而 npm 是其默認的包管理器。我們可以通過 Homebrew 來安裝 Node.js:

brew install node

安裝完成後,你可以驗證 Node.js 和 npm 的版本:

node -v
npm -v

常見前端工具與框架的安裝

1. Git

Git 是版本控制系統的領先者,幾乎所有的開發者都在使用它。如果尚未安裝,可以通過 Homebrew 安裝 Git:

brew install git

2. Visual Studio Code (IDE)

Visual Studio Code 是一款功能強大且用戶友好的代碼編輯器,適用於多種編程任務。可以通過官方網站或者 Homebrew 進行安裝:

brew cask install visual-studio-code

3. Sublime Text

Sublime Text 也是一個非常受歡迎的文本編輯器和輕量級 IDE,可以用於編寫和調試前端代碼。可以從其官網下載並安裝:

open <sublimetext_download_url>

4. Chrome DevTools

Chrome DevTools 是每個前端開發者必備的工具,它可以用來檢查網頁元素、性能分析、網絡請求查看等等。這些工具內置在 Google Chrome 中,因此只需安裝 Chrome 瀏覽器即可訪問它們。

5. Postman

Postman 是一個 REST API 客戶端,可以幫助測試 HTTP APIs。它是免費的,可以在其官網下載到:

open <postman_download_url>

常見前端庫與框架的安裝與配置

1. React

React 是 Facebook 創建的一個 JavaScript 庫,用於構建用戶界面。要安裝 React 和它的打包工具 create-react-app,您需要先安裝 yarn(一個替代 npm 的包管理器):

brew install yarn

然後,你可以使用 yarn 來全局安裝 create-react-app:

yarn global add create-react-app

現在,你可以用 `create-react-app` 命令來創建一個新的 React 應用了。

2. Vue.js

Vue.js 是一個漸進式的JavaScript框架,被廣泛應用於Web開發中。安裝 Vue CLI 是非常簡單的:

npm install -g @vue/cli

安裝完畢後,你可以使用 `vue create` 命令來初始化一個新的 Vue 項目。

3. Angular

Angular 是谷歌支持的一款前端框架,擁有強大的社區支持和豐富的資源。安裝 Angular CLI 同樣簡單:

npm install -g @angular/cli

安裝完成後,你可以使用 `ng new` 命令來創建一個新的 Angular 項目。

其他實用工具的安裝

1. The Unarchiver

The Unarchiver 是一個免費的開源歸檔解壓工具,可以處理大多數常見的檔案格式,例如 ZIP, RAR 等。這個工具非常有用,尤其是在處理下載的前端框架壓縮包時。

2. Insomnia or Postman

Insomnia 或 Postman 都是很好的 HTTP 客戶端工具,可以用來發送 HTTP 請求模擬接口調用,這對於前端開發來說也是必不可少的。

以上步驟應該足以幫助你在基於 Apple Silicon(M1/M2/M3)的 Mac 上建立一個高效的前端開發環境。記住,保持所有軟件更新至最新版本,並且定期備份數據以確保工作安全無虞。

为您推荐