Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

前端一萬小時發表於2019-04-03
Web

本知識學習用時：1.5小時

本文同步更新於「公號：前端一萬小時」、「語雀：Oli's 前端一萬小時」

前言： 在上一篇《初次接觸前端，我們要理解哪些名詞？》中，我們瞭解了初識前端應該掌握的名詞、概念，其中也涉及了很多需要我們安裝的軟體、配置的環境等知識要點。 本篇我們並不會機械的走一遍安裝的流程，因為只要你學會了“科學的上網”，那麼安裝軟體僅僅是：開啟相應軟體的官網→ DOWNLOAD→ 一直“下一步”（國外的軟體一般比較良心，不會出現其他捆綁安裝等）。 本篇的重點是：跟著行文順序，你我都動起手來，借安裝軟體的機會，熟悉新的瀏覽器、新的搜尋方式以及最直觀的先看看我們接下來會時時用到的這些偉大的、可愛的工具們。 （閱讀過程中，遇生疏的名詞，請翻閱上一篇的相關解釋，本篇不作贅述）

1 科學的上網

學習前端過程中，最基本和經常的操作就是：搜尋和檢查。

1.1 搜尋

1.1.1 工具：Chrome 瀏覽器

  • 官網、或百度搜尋安裝。

1.1.2 讓 Chrome 瀏覽器可以登入國外網站（特別重要的一步）

  • 敏感操作——搭梯子，請自行操作;
  • 檢驗標準：能登入 YouTube 。

1.2 檢查

後邊無論學 HTML、CSS、JS 還是 Ajax 等，這個檢查的動作都是最經常用到的動作。

  1. 在瀏覽器中的任何網頁上，滑鼠右鍵，然後彈出的選項中選擇“檢查”；

    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

  2. 會出現我們本頁面的相關程式碼——DOM 樹（Document Object Model 文件物件模型）；

  • 我們通過 JS 操作頁面的元素，進行新增、移動、改變或移除的方法和屬性，都是 DOM 提供的。
    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

  1. 通過點選程式碼框左上角圖示，可以實時檢視網頁內任意模組對應的程式碼（滑鼠放在任意地方，程式碼框裡就會顯示與之對應的程式碼）；

    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

  2. 按建盤上 Esc 鍵，或直接點選程式碼框的 Console，就可以開啟 Console ；

  • 作用：用於除錯 JS 的；
  • 比如：有一個樣式沒有出來，那麼程式碼框與之對應的程式碼會報錯，可以讓我們知道錯在哪裡。
    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

2 Git的安裝

?Git 中文使用文件——作為參考手冊，需要時翻翻

2.1 安裝方式

谷歌搜尋安裝（點選 DOWNLOAD 後，直接下一步）——注：macOS 系統在安裝了 Xcode 後會自帶 Git 。

2.2 注意事項

針對 windows 使用者，Git 最好直接安裝在 C 盤。因為 windows下這些軟體總會出現些莫名的小問題，直接安裝在 C 盤會支援的相對好一些。

2.3 安裝完成

安裝完成後，裡邊會相應附帶有 Git Bash 。可以開啟 Git Bash 客戶端（蘋果電腦使用者開啟自有終端），初次使用需要輸入相關命令列（先照做，後邊文章會具體談到）：

git config --global user.name xxx          →方便產品經理找你（xxx是輸入我們自己的使用者名稱）
git config --global user.email yyy         →方便產品經理找你（yyy是輸入你的郵箱）
git config --global push.default simple
git config --global core.quotepath false   →防止檔名變成數字
git config --global core.editor "vim"      →使用vim編輯提交資訊
複製程式碼

2.4 外觀設定

（針對 windows 使用者）設定一下 Git Bash 客戶端的外觀。

2.4.1 將操作介面設定成透明，方便操作、觀察變化
Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

2.4.2 將介面滾動條設定在右側
Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

2.4.3 設定編碼方式

Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

3 Node.js安裝

3.1 安裝方式

谷歌搜尋安裝（點選 DOWNLOAD 後，直接下一步）；

3.2 注意事項

針對 windows 使用者，Node.js 最好直接安裝在 C 盤。因為 windows 下這些軟體總會出現些莫名的小問題，直接安裝在 C 盤會支援的相對好一些。

3.3 安裝完成

裝了 Node.js 之後我們就可以在 Git Bash 裡面使用 node 和 npm 這兩個命令了（下載安裝 Node.js 後，其附帶了 npm），開啟 Git Bash 試試看：

3.3.1 檢視 node 和 npm 在電腦的哪個位置

which node
which npm
複製程式碼

3.3.2 檢視 node 和 npm 的版本號

node -v
npm -v

或

node --version
npm --version
複製程式碼

3.3.3 試著用 npm 做一個命令列的翻譯工具（這個小工具的名字叫做 fanyi）

npm i -g fanyi
複製程式碼

3.3.4 載入完成後，輸入

fanyi hello
複製程式碼

相關中文解釋就會出來，還會給你發音。
⚠️注意：

  • 如果遇到以下“許可權問題”：

    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

  • 請如下操作：（參考：處理npm許可權問題）

    Web 前置知識——工欲善其事，必先利其器：軟體安裝、環境搭建

3.3.5 試著用 node 做個算數

node
複製程式碼
  • 回車後便進入了 node 執行環境，這時候我們就可以用 node 寫 JS 了：
1+2
複製程式碼

4 編輯器的安裝

4.1 安裝方式

谷歌搜尋安裝（點選 DOWNLOAD 後，直接下一步）。

4.2 編輯器的選擇

上一篇文章中介紹的編輯器任選其一，我個人比較傾向於 Sublime Text 和 webstorm 。

4.3 建議

初學的前半個月，個人強烈建議用記事本/文字編輯器把程式碼一個個敲出來，熟悉基本結構。

4.4 Emmet 語法

針對程式碼編輯器，會引入一個名詞： Emmet 語法 。目前所有的前端編輯器都支援 Emmet 。提高程式碼錄入效率。

後記： 以上就是最基本的安裝和配置，至於具體使用，初期不用深挖，隨著學習的深入，帶著疑問去尋找答案是最好的學習方式。我們上邊已經初試了牛刀，不得不佩服，這些工具之強大，我們該感到慶幸，慶幸置身在了這個年代，有這麼多的資源，我們肯定能把前端搞定。學無止境，它值得你我用後邊的 10000 小時來對待。

（本文版權歸 “Oli's 前端一萬小時” 所有，未經授權，請勿轉載）

相關文章